[FIXED] Change progress bar color in Primeng


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


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.


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