Languages

Menu
Sites
Language
Changing circular progressbar color

Hi all,

I need to change the colors of circular progressbar and so far have been able to do it only for the value selected but not the part of the circle that is left unfinished. I override the

.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
    border: 0.5rem solid rgb(79,168,45);
}

and that changes the color of the actual value, this should be the other portion

.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
  border: 0.5rem solid rgba(55, 1, 23, 1);
}

but the color stays the same. Any ideas?

Thanks,

-Jirka

List

Responses

7 Replies
Iqbal Hossain

hello

Try this .... it works like charm ! 

.ui-progress-circle .ui-progress-circle-value .ui-progress-circle-value-left {
border: 8px solid rgba(62, 12, 219, 1);
border-top-color: #3E0CDB;
border-right-color: #3E0CDB;
border-bottom-color: #3E0CDB;
border-left-color: #3E0CDB;
}

.ui-progress-circle .ui-progress-circle-value .ui-progress-circle-value-right{
border: 8px solid rgba(62, 12, 219, 1);
border-top-color: #3E0CDB;
border-right-color: #3E0CDB;
border-bottom-color: #3E0CDB;
border-left-color: #3E0CDB;
}

 

Jirka Prazak

Hello just tried it and it has no effect on the colors. What did have effect however was changing the background color using

.ui-progressbar .ui-progressbar-bg {
  border: 0.5rem solid rgba(179, 179, 179, 1);
}

What exactly does the -right style signify, perhaps the direction of the progress, clockwise vs counter clock wise?

Thanks,

-Jirka

Iqbal Hossain

It works for me!  

 

Iqbal Hossain

Iqbal Hossain

I think clockwise ...Use my code given above! 

Iqbal Hossain

Did you solve your problem ?

Jirka Prazak

Yes, it has to do with the right-style left-style. Once you get over 50% it goes to the left-style. It is different on wearable and a different component than what you are showing. I ended up using canvas for these things.

Regards