JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

CSS

.container {
    background:red;
    padding:5px;
    margin:50px;
    width:100px;
    height:100px;
}


.active {
    padding:5px;
    margin:50px;
    width:100px;
    height:100px;
}

body {
    height: 2000px;
}

JavaScript

$(function() {
    $(".container")
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
    		$("container").each(function(){
        	if(scroll > ($(this).offset().top + $(this).height()) || (scroll + $(window).height()) <  $(this).offset().top) {
          	$(this).removeClass('active');
          }else{
          	$(this).addClass('active');
          }
        });
    });
});

var circle = new ProgressBar.Circle('.active', {
  color: '#FCB03C'
});

circle.animate(1.0);