title: Making a progressbar to load from 0 to 100% in 10 seconds with JavaScript
body: <p>I am trying to make a simple progressbar to load for 10 seconds always when the JavaScript function is called. I don't want to use jQuery or any library. I want it to be on clean JavaScript. The only think I don't understand is how to make the progressbar load from 0 to 100% in 10 seconds. I am providing code with what I have done until now. Any suggestions?</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>var elem = document.getElementById("slide-progress-bar");
  var width = 1;
  
  function progressBar() {
    resetProgressBar();
  
    id = setInterval(frame, 100);
  
    function frame() {
      if (width &gt;= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }
  }
  
  function resetProgressBar() {
    width = 1;
    elem.style.width = width + '%';
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slide-progress-bar {
    width: 1118px;
    background-color: rgba(155, 155, 255, 0.36);
    transition: width 10s linear;
    display: inline-block;
    vertical-align: middle;
  }
  
  .progress-bar {
    height: 5px;
    background-color: #aff;
    width: 1%;
    position: relative;
    transition: linear;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slide-progress-bar"&gt;
    &lt;div class="progress-bar" id="progress-bar"&gt;&lt;/div&gt;
    &lt;!--progress-bar--&gt;
  &lt;/div&gt;
  &lt;!--slide-progress-bar--&gt;</code></pre>
  </div>
  </div>
  </p>