[tp-20]

Доброго дня!
Есть простая анимация чисел при прокрутке на jQ-скрипте spincrement. Она работает. Тут всё в порядке.
Но можно ли кроме чисел сделать и анимацию полосок (типа прогресс-бар) ?
Чтобы проще было понимать:


Всё собрал вот здесь https://jsfiddle.net/tps20/fdo1px25/

<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 " 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-4">50</div>
                </div>
            </div>

// 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");
        });
});

В итоге должно получиться так: (блин, тут анимация не работает)