圆形进度条在窗口中时开始动画

Question

我正在使用progressbar.js制作一个动画的圆形条以自学一些发展，经过一番研究，我遇到了一个执行类似工作的代码，但是我试图在这些条位于其中时启动动画窗口，而不仅仅是滚动，因为页面有点长。 https://jsfiddle.net/wewlad/mc3qzytb/

var startColor = '#303032';
var endColor = '#fd304c';

$('.progress_cir').each(function(i) {
 var circle = new ProgressBar.Circle(this, {
    color: endColor,
    easing: 'easeInOut',
    strokeWidth: 10,
    duration: 700,
    text: {
        value: '0'
    }
});

var value = ($(this).attr('value') / 100);

circle.animate(value, {
    from: {
        color: startColor
    },
    to: {
        color: endColor
    },
    step: function(state, circle, bar) {
        circle.path.setAttribute('stroke', state.color);
        console.log(circle);
        circle.setText((circle.value() * 100).toFixed(0));
    }
});
});

是否有可能做到这一点，并且仍然与所有浏览器兼容？

编辑： 我找到了可以完成此工作的代码段，但无法使两者协同工作，请向正确的方向推进？

function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));