title: How to change color of a progress bar (JS or CSS)
body: <p>I saw a perfect topic here : <a href="https://stackoverflow.com/questions/38123404/how-to-increment-value-on-progress-bar?rq=1">How to increment value on progress-bar?</a></p>
  
  <p>I would like to insert a progress bar like that in my web project. </p>
  
  <p>So i follow <a href="https://codepen.io/chasenyc/pen/grWrKR" rel="nofollow noreferrer">this codepen</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function move() {
    var progress = document.getElementById("progressbar");
    var width = 1;
    var id = setInterval(frame, 10);
  
    function frame() {
      if (width &gt;= 100) {
        clearInterval(id);
      } else {
        width++;
        progress.value = width
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progress.is-large {
    height: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;progress id="progressbar" class="progress is-large is-info" max="100" value="1"&gt;&lt;/progress&gt;
  &lt;/br&gt;
  &lt;button onclick="move()"&gt;Click Me&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have juste one problem, i don't know how to change the color of the progress bar before animation and after animation. </p>
  
  <p>I tried a lot of things without sucess... </p>
  
  <p>Please is there any Ninja who would like to help me ? </p>
  
  <p>Regards</p>