title: How to make dynamic progress bars with javascript
body: <p>problem with make an animated dynamic scroll bars with javascript</p>
  
  <p>I tried to make a dynamic animated progress bars with which it will run when i reach to a specific div by using onscroll event but i can't reach to my goal because i feel there is a conflict here between the for loop and the setInterval event!</p>
  
  <pre><code>    //HTML
      &lt;div class="skills_bars"&gt;
          &lt;div class="meter"&gt;
              &lt;span&gt;&lt;/span&gt;
              &lt;span class="number"&gt;10&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="meter"&gt;
              &lt;span&gt;&lt;/span&gt;
              &lt;span class="number"&gt;10&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="meter"&gt;
              &lt;span&gt;&lt;/span&gt;
              &lt;span class="number"&gt;10&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="meter"&gt;
              &lt;span&gt;&lt;/span&gt;
              &lt;span class="number"&gt;10&lt;/span&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
      //CSS 
   .skills_bars .meter{
     width: 100%;
     background: #000000;
     height: 11px;
     position: relative;
     display: block;
     margin-bottom:60px;
   }
  
  .skills_bars .meter span:first- 
  of-type{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 10%;
    height: 100%;
    background: #FC4444;
    transition: all 1s ease-in-out;
  
  }
  
  .skills_bars .meter span.number{
    position: absolute;
    right: 3px;
    top: -29px;
    font-weight: bold;
    color: #fff;
    font-size: 18px;
    transition: all 1s ease-in-out;
  }
  
      //JS CODE
      var progressMeter = document.querySelectorAll(".skills_bars 
                          .meter span:first-of-type");
      var progressNumber = document.querySelectorAll('.skills_bars 
                           .meter span.number');
      var progressNumberWidths = [50,90,80,20];
  
      window.addEventListener("scroll", progressNumberAdd);
  
      function progressNumberAdd(){
          if (pageYOffset &gt; (progressMeter[0].offsetTop - 600)){
              window.removeEventListener("scroll", 
              progressNumberAdd);
              for(var i = 0; i &lt; progressMeter.length; i++){
                          x(i);
              }
          }
      }
  
      function x(i){
          var move = setInterval(numberAddCheker(i), 15);
      }
  
      var width = 0;
      function numberAddCheker(i){
  
          if(width &gt;= progressNumberWidths[i]){
              clearInterval(move)
          }else{
              width++;
              console.log(width)
              progressMeter[i].style.width = width + "%";
              progressNumber[i].textContent = width * 1 + "%" ;
          }
      } 
  </code></pre>