title: Change mat-progress-bar color depending on value
body: <p>I have a progress bar that gets its value from an array, like this:</p>
  <pre class="lang-js prettyprint-override"><code>    users = [
      {
        &quot;name&quot;: &quot;Tim Jones&quot;,
        &quot;email&quot;: &quot;timjones_1965@gmail.com&quot;,
        &quot;photo&quot;: &quot;assets/images/tim-jones.jpg&quot;,
        &quot;progress&quot;: &quot;50&quot;
      },
  </code></pre>
  <p>And the progress bar</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;mat-progress-bar mode=&quot;determinate&quot; value=&quot;{{user.progress}}&quot;&gt;&lt;/mat-progress-bar&gt;
  </code></pre>
  <p>I want to display different colors depending on progress value:</p>
  <pre><code>Progress from 0% to 20% = red&lt;br&gt;
  Progress from 21% to 50% = yellow&lt;br&gt;
  Progress from 51% to 100% = green&lt;br&gt;
  </code></pre>
  <p>Thanks for your help!</p>