title: Change the color of progress bar dynamically using jQuery
body: <p>I have a grid, which shows the system drive space. I am showing the space of the C Drive in a gridview column in progress bar format. I bind the gridview from my the db. Suppose if the drive space value is greater than 90, I need to display the progress bar color as red else green.</p>
  
  <p>This is the gridview column's source code:</p>
  
  <pre><code>&lt;Columns&gt;
       &lt;asp:TemplateField&gt;
            &lt;ItemTemplate&gt;
                   &lt;div class='progress'&gt;
                       &lt;div class="progress-label"&gt;&lt;%# Eval("C") %&gt;&lt;/div&gt;
                   &lt;/div&gt;
            &lt;/ItemTemplate&gt;
        &lt;/asp:TemplateField&gt;
  &lt;/Columns&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>.ui-progressbar {
      position: relative;
  }
  
  .progress-label {
      position: absolute;
      left: 50%;
      top: 4px;
      font-weight: bold;
      text-shadow: 1px 1px 0 #fff;
  }
  
  body {
      font-family: Arial;
      font-size: 10pt;
      }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(function () {
      $(".progress").each(function () {
          $(this).progressbar({
              value: parseInt($(this).find('.progress-label').text())
          });
      });
  });
  </code></pre>
  
  <p>This is the output, I am getting:</p>
  
  <p><a href="https://i.stack.imgur.com/qI0e2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qI0e2.jpg" alt="enter image description here"></a>  </p>
  
  <p>How to change the color of the progress bar dynamically at runtime?</p>