JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<div class="skills_bars" style="margin-top: 100vh">
        <div class="meter">
            <span></span>
            <span class="number">10</span>
        </div>
        <div class="meter">
            <span></span>
            <span class="number">10</span>
        </div>
        <div class="meter">
            <span></span>
            <span class="number">10</span>
        </div>
        <div class="meter">
            <span></span>
            <span class="number">10</span>
        </div>

    </div>

CSS

.skills_bars .meter{
   width: 100%;
   background: #000000;
   height: 11px;
   position: relative;
   display: block;
   margin-bottom:60px;
 }
body{
  background: #ccc;
}
.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;
}

JavaScript

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];
    var moveTimers = [];
    var width = 0;
    window.addEventListener("scroll", progressNumberAdd);

    function progressNumberAdd(){
        if (window.pageYOffset > (progressMeter[0].offsetTop - 600)){
            window.removeEventListener("scroll", progressNumberAdd);
            initProgressBar();
        }
    }
    
    function initProgressBar(){
      for(var i = 0; i < progressMeter.length; i++){
        x(i);     
      }  	
    }

    function x(i){
        moveTimers[i] = setInterval(numberAddCheker, 15, i);
    }
    
    function numberAddCheker(i){
        if(width >= progressNumberWidths[i]){
            clearInterval(moveTimers[i])
        }else{
            width++;
            progressMeter[i].style.width = width + "%";
            progressNumber[i].textContent = width * 1 + "%" ;
        }
    }