Elementor custom animated progress bar with waypoint

index.html

<div class="pref-progress" data-percent="50">
    <div class="pref-bar"><div class="pref-perc">0%</div></div>
</div>
<br>
<div class="pref-progress" data-percent="72">
    <div class="pref-bar"><div class="pref-perc">0%</div></div>
</div>
<br>
<div class="pref-progress" data-percent="99">
    <div class="pref-bar"><div class="pref-perc">0%</div></div>
</div>
<script>
jQuery(document).ready(function($) {

    $('.pref-progress').each(function(){
        var _this = this;
        elementorFrontend.waypoint($(this), function() {
            var perc = $(_this).data('percent');
            $(_this).find('.pref-bar').animate({
                width: perc+'%',
            },
            {
                duration: 2000,
                step: function(now, fx) {
                    $(_this).find('.pref-perc').html(Math.floor(now) +  '%');
                }
            }); 
        });
    })

});
</script>
<style>
    .pref-progress {
        width: 100%;
        display: flex;
        padding-right: 30px;
    }
    .pref-bar {
        width: 0%;
        position: relative;
        background-color: black;
        overflow: visible !important;
        height: 20px;
    }
    .pref-perc {
        height: 100%;
        position: absolute;
        right: -5px;
        transform: translateX(100%);
        line-height: 20px;
    }
</style>