滚动条上的进度条动画

Question

我的进度条会在页面加载时显示动画。当用户向下滚动时，我要设置动画。

在加载页面时，所有进度条会同时设置动画。我想通过向下滚动到达特定的栏来制作动画。

HTML和CSS都可以，我需要编辑jQuery代码来解决此问题。

请帮助我解决这个问题。

我的代码在下面

$(document).ready(function(){
    $('.progress-title > span').each(function(){
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        },{
            duration: 1500,
            easing: 'swing',
            step: function (now){
                $(this).text(Math.ceil(now));
            }
        });
    });
});

.progress-title{
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px;
}
.progress{
    height: 20px;
    background: #d4d7e6;
    border-radius: 30px;
    box-shadow: none;
    margin-bottom: 30px;
    overflow: visible;
}
.progress .progress-bar{
    border-radius: 30px;
    box-shadow: none;
    position: relative;
    animation: animate-positive 2s;
}
.progress .progress-bar:before{
    content: "";
    width: 100%;
    height: 50%;
    background: rgba(0,0,0,0.3);
    border-radius: 0 0 10px 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.progress .progress-bar:after{
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #cbcbcb;
    border: 8px solid #000;
    position: absolute;
    bottom: -8px;
    right: 0;
    z-index: 1;
}
@keyframes animate-positive{
    0%{ width: 0; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 400px;"></div>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3 class="progress-title">HTML5 - <span>50</span>%</h3>
            <div class="progress">
                <div class="progress-bar" style="width:50%; background:#3d99f9;"></div>
            </div>
            <h3 class="progress-title">CSS3 - <span>75</span>%</h3>
            <div class="progress">
                <div class="progress-bar" style="width:75%; background:#deeb11;"></div>
            </div>
        </div>
    </div>
</div>