var circle_viewed = false; // Вспомогательная переменная
var circle_scroll = $('.circle'); // Класс самой диаграммы
var offset = circle_scroll.offset(); // Расстояние в пикселях до самой диаграммы от верха страницы
$(window).scroll(function(){
if ((($(document).scrollTop()) > ((parseFloat(offset.top)) - parseFloat($(window).height()))) && (!(circle_viewed ))) { //если страница прокручена то проверяем докрутили ли мы до самой диаграммы
$('.circle-1').circleProgress({ // Если докрутили, инициализируем
size: 160,
startAngle: -1.55,
value: 0.9,
fill:{ color: "#30bae7"}
}).on('circle-animation-progress', function(event, progress) { // Рисуем проценты во время анимации
$(this).find('strong').html(parseInt(90 * progress) + '<i>%</i>');
});
circle_viewed = true;
});
// эта конструкция ((parseFloat(offset.top)) - parseFloat($(window).height())) делает следующее, когда вы долистываете до нужно диаграммы, то отсчет пикселей начинается с верхней части экрана пользователя, соответственно мы отнимаем высоту экрана и получается что когда долистываем до диаграммы снизу экрана, то она будет стартовать.
circle_viewed - это если мы один раз просмотрели диаграмму, то второй раз когда мы к ней долистаем, её анимировать не надо.
jQuery, разумеется, должен быть подключен.
