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" id="active"></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 {
    background:#333;
    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).removeAttr("id"); 
          }else{
          	$(this).attr("id", "active"); 
          }
        });
    });
});

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

circle.animate(1.0);