JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title"> Scroll down </div>
  <div class="area"> 
  <div class="scale-area">
     <h6>Raised</h6>   
     <div class="scale" >
            <div class="scale-bar-1" data-percent="15"></div>
     </div>   
</div>
  <div class="scale-area">
     <h6>Raised</h6>     
     <div class="scale" >
            <div class="scale-bar-1" data-percent="67"></div>            
     </div>     
</div>
  <div class="scale-area">
     <h6>Raised</h6>  
     <div class="scale" >
            <div class="scale-bar-1" data-percent="45"></div>            
     </div>    
</div>
</div>

CSS

.title{
   margin-top:20px;
   font-size: 26px;
   font-weight: 600;
   text-align: center;
}
.area{
  margin-top:500px;
  overflow: hidden; 
  width: 100%;
}

.scale-area h6 {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;   
}

.scale {
    position: relative;
    display: block;
    margin-bottom: 8px;
    margin-top: 4px;
    background: #ffeb3b;
    height: 7px;
    width: 100%;    
}

.scale-bar-1 {
    width: 100%;
    background: #f2f2f2;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

$(window).scroll(function () {
        if (($(this).scrollTop() + $(this).height()) >= $(".scale-bar-1").offset().top) {
            $('.scale-bar-1').each(function () {
                var getPercent = $(this).data('percent') / 100;
                var getProgressWrapWidth = $(this).width();
                var progressTotal = getPercent * getProgressWrapWidth;
                var animationLength = 1500;
                $(this).stop().animate({
                    left: progressTotal
                }, animationLength);
            });
        }
});