title: How to create multiple Progress Bars called in succession (one after another) using just Vanilla JS on simple HTML + CSS? Without setTimeout
body: <p>On document load I need three progress bars to run sequentially one after another using Vanilla JS, HTML and CSS. So when the first one finishes loading to completion (it's max value) the next one fires off. I am not looking for a complicated CSS solution. I am curious to know how to do this with just vanilla JS without a setTimeout approach.</p>
  <p>I created this on jsfiddle <a href="https://jsfiddle.net/blitzr/vf78hu0g/3/" rel="nofollow noreferrer">https://jsfiddle.net/blitzr/vf78hu0g/3/</a></p>
  <pre><code> &lt;div&gt;
        &lt;label&gt;Bar 1&lt;/label&gt;
        &lt;progress class=&quot;progressBars&quot; value=&quot;0&quot; max = &quot;90&quot;&gt;&lt;/progress&gt;
        
        &lt;br&gt;
        
        &lt;label&gt;Bar 2&lt;/label&gt;
        &lt;progress class=&quot;progressBars&quot; value=&quot;0&quot; max = &quot;35&quot;&gt;&lt;/progress&gt;
        
        &lt;br&gt;
        
        &lt;label&gt;Bar 3&lt;/label&gt;
        &lt;progress class=&quot;progressBars&quot; value=&quot;0&quot; max = &quot;35&quot;&gt;&lt;/progress&gt;
        
        &lt;br&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>I am showing how I would approach one progress bar.</p>
  <pre><code>var index = 0;
  var id;
  
  let bars = document.getElementsByClassName(`progressBars`);
  
  this.id = setInterval(() =&gt; {
    increaseProgress(bars[this.index])    
  }, 10 );
  
  
  function increaseProgress(bar) {
    if (bar.value &lt; bar.max) bar.value++;
    else {
      clearInterval(this.id);
    }
  }
  </code></pre>
  <p>With the following css</p>
  <pre><code>progress {
    width: 500px;
  }
  progress::-webkit-progress-bar{
    background-color: gray;
  }
  progress::-webkit-progress-value{
    background-color: green;
  }
  </code></pre>