Анимация при скролле progress bar

var bar = new ProgressBar.Circle(container, { 
  strokeWidth: 6, 
  easing: 'easeInOut', 
  duration: 1400, 
  color: '#FFEA82', 
  trailColor: '#eee', 
  trailWidth: 1, 
  svgStyle: null 
}); 
 
// Функция, которая  
var visible = function(e) { 
  var elementTop = window.pageYOffset + e.getBoundingClientRect().top, // Получаем координаты верхней части элементы 
      windowBottom = window.pageYOffset + document.documentElement.clientHeight; // Получаем положение нижней части окна 
   
  // Если положение нижней части окна больше чем верхняя координата элемента, то мы долистали до элемента 
  // Так же проверим, не запущена ли уже анимация, а то выйдет казус в виде всё время запускающееся анимации 
  if(elementTop < windowBottom && Number(e.dataset.animationState) === 0){ 
    bar.animate(1.0); // Number from 0.0 to 1.0 
     
    e.dataset.animationState = 1; // Отмечаем, что анимация запущена 
  }; 
}; 
 
// Получаем нужный элемент 
var element = document.querySelector('#container'); 
 
// Запускаем функцию 
// Запускаем при скролле 
window.addEventListener('scroll', function() { 
  visible(element); 
}); 
 
// И сразу при загрузке страницы. Вдруг элемент уже находится в видимой области 
visible(element);

#container { 
  margin: 20px; 
  width: 200px; 
  height: 200px; 
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> 
 
<div id="container" data-animation-state="0"></div>