如何为页面上的进度栏设置动画

Question

http://afrocentricgentlemvn.co.za/

我有一个圆形的进度条，可以在页面加载时进行动画处理，但是我希望它在用户向下滚动到页面时进行动画处理，因为它将位于页面中间。现在，如果页面加载，用户将看不到动画。

因此，从本质上讲，应该暂停动画，直到用户向下滚动到某个点为止，一旦看到该条，动画就开始播放。

我使用了这个jquery插件[https://www.jqueryscript.net/loading/jQuery-Plugin-SVG-Progress-Circle.html]

这是我到目前为止使用的Javascript：

<script>
function makesvg(percentage, inner_text=""){
var abs_percentage = Math.abs(percentage).toString();
var percentage_str = percentage.toString();
var classes = ""
if(percentage < 0){
classes = "danger-stroke circle-chart__circle--negative";
} else if(percentage > 0 && percentage <= 30){
classes = "warning-stroke";
} else{
classes = "success-stroke";
}
var svg = '<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" 
xmlns="http://www.w3.org/2000/svg">'
 + '<circle class="circle-chart__background" cx="16.9" cy="16.9" r="15.9" 
/>'
 + '<circle class="circle-chart__circle '+classes+'"'
 + 'stroke-dasharray="'+ abs_percentage+',100"    cx="16.9" cy="16.9" 
 r="15.9" />'
 + '<g class="circle-chart__info">'
 + '   <text style="color:#fff;" class="circle-chart__percent" x="17.9" 
 y="15.5">'+percentage_str+'%</text>';
if(inner_text){
svg += '<text class="circle-chart__subline" x="16.91549431" 
y="22">'+inner_text+'</text>'
}
svg += ' </g></svg>';
return svg
}
(function( $ ) {
$.fn.circlechart = function() {
this.each(function() {
var percentage = $(this).data("percentage");
var inner_text = $(this).text();
var inner_text2 = $(this).text();
$(this).html(makesvg(percentage, inner_text));
});
return this;
};

 <script>
 $('.circlechart').circlechart(); // Initialization
</script>