title: How to dynamically change the primeNG progress background?
body: <p>I'm working with the <a href="https://www.primefaces.org/primeng/#/progressbar" rel="nofollow noreferrer">primeNG progress component</a> and I would like to change the color of the progress bar depending on the value. So 25% 25% is blue and 75% is green.</p>
  
  <p>I've found that I can override the given color with:</p>
  
  <pre><code>.delay .progressBarDelay .ui-progressbar .ui-progressbar-value {
      background: red;
  }
  </code></pre>
  
  <p>the HTML:</p>
  
  <pre><code>&lt;div class="delay"&gt;
      &lt;p&gt;{{list.delay}}&lt;/p&gt;                
      &lt;div&gt;&lt;p-progressBar class="progressBarDelay" [value]="list.value" [showValue]="false"&gt;&lt;/p-progressBar&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But now all the elements are red. And I have multiple progress bars. Is there a way to set the background color depending on the given value?</p>