[FIXED] Change progress bar color in Primeng

Issue

How could we change the progress bar colour in Primeng. In the progress bar documentation it lists down

ui-progressbar-value

as the Element whose width changes according to value.

But when in the CSS when I set

.ui-progressbar-value {
  background-color: #ef5439;
}

It does not change anything. Infact I don’t see any color.
Any help would be appreciated.

Solution

First add your own unique class in your progress bar like below
class=”customProgress” and then try to override it in your scss or css file.
Hope it will work

<p-progressBar class="customProgress" [value]="value"></p-progressBar>



.customProgress .ui-progressbar .ui-progressbar-label {
    color: yellow;
}

.customProgress .ui-progressbar .ui-progressbar-value {
    background: red;
}

Answered By – DirtyMind

Answer Checked By – David Marino (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published