title: Changing color of progress bar on callback
body: <p>I have a progress bar:</p>
  
  <pre><code>&lt;progress id="communicationProgress" value="0" max="100"&gt;&lt;/progress&gt;
  </code></pre>
  
  <p>I use jquery to animate it:</p>
  
  <pre><code>var progress = function (name, duration, value, easing, callback) {
      $(name).val(0).animate(
          { value: value },
          { duration: duration,
              easing: easing,
              complete: function () {
                  if (callback) {
  
                  }
              }
          }
      );
  };
  </code></pre>
  
  <p>This is the css for color values that are used during the animation:</p>
  
  <pre><code>#skills span {
      top: -30px;
      left: 2%;
      position: relative;
      font-size: 1.4em;
      font-weight: bolder;
      font-family: monospace;
      color: #fff;
  }
  
  progress {
      background-color: #f3f3f3;
      border: 0;
      height: 2.5em;
      width: 100%;
  }
  
  progress::-webkit-progress-bar {
      background-color: #e0eaf0;
  }
  
  progress::-webkit-progress-value {
      background-color: #329ad1;
  }
  
  progress::-moz-progress-bar {
      background-color: #329ad1;
  }
  </code></pre>
  
  <p>I want to change the color of the status bar on callback. I have tried looking through the jquery docs but can't figure out how to change the color. </p>