JSFiddle - React, Tailwind, and code Playground

by tps20

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Number-Increment-Animations-with-jQuery-spincrement/jquery.spincrement.js"></script>


<div class="int-fact-counters">
                <small class="vc_label">Средний результат за день</small>
                <div class="int-fct-item">
                    <div class="skillbar-bar">
                        <span class="vc_bar " data-percentage-value="85" data-value="85" style="background-color: rgb(33, 33, 33); width: 85%;"></span>
                        <div class="pointerval" style="width: 85%;">
                        </div>
                    </div>
                    <div class="fct-count-1">95</div>
                </div>
             
                <small class="vc_label">Сегодня</small>
                <div class="int-fct-item">
                    <div class="skillbar-bar">
                        <span class="vc_bar " data-percentage-value="85" data-value="85" style="background-color: rgb(33, 33, 33); width: 85%;"></span>
                        <div class="pointerval" style="width: 85%;">
                        </div>
                    </div>
                    <div class="fct-count-2">80</div>
                </div>
             
                <small class="vc_label">Вчера</small>
                <div class="int-fct-item">
                    <div class="skillbar-bar">
                        <span class="vc_bar " data-percentage-value="85" data-value="85" style="background-color: rgb(33, 33, 33); width: 85%;"></span>
                        <div class="pointerval" style="width: 85%;">
                        </div>
                    </div>
                    <div class="fct-count-3">65</div>
                </div>
             
                <small class="vc_label">Позавчера</small>
                <div class="int-fct-item">
                    <div class="skillbar-bar">
                        <span class="vc_bar "...

CSS

*{
  font-family:Calibri;
}
.int-fact-counters{
    margin: auto;
    width: 300px;
}
.int-fct-item{
    display: flex;
    align-items: center;
}
.skillbar-bar{
    border: 1px solid;
    height: 4px;
    margin: 10px;
    width: 100%;
    line-height: 10px;
}
.vc_bar{
    background-color: rgb(33, 33, 33);
    width: 85%;
    display: block;
    height: 5px;
}

JavaScript

// spincrement
 $(document).ready(function(){
        function countup(className){ //className - имя класса, в котором есть число
            var countBlockTop = $("."+className).offset().top; //смещение блока с числом относительно верхнего края	
            var windowHeight = window.innerHeight;//высота окна браузера
    	    var show = true;// отвечает, что если один раз счетчик сработает, больше не срабатывал
        					
        	$(window).scroll( function (){
        		if(show && (countBlockTop < $(window).scrollTop() + windowHeight)){ 
        			show = false; //если мы видим число, то больше его не надо показывать
        						
        			$('.'+className).spincrement({ //вызов плагина с параметрами 
        				from: 1,               //начинать с 1
        				duration: 4000,        //задержка счетчика
        			});
        		}
        	})	
        }
        
        $(function() {
    		countup("fct-count-1");
            countup("fct-count-2");
            countup("fct-count-3");
            countup("fct-count-4");
        });
});