JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div id="example-percent-container-1"></div>
<div id="example-percent-container-2"></div>
<div id="example-percent-container-3"></div>

CSS

#example-percent-container-1{
    width: 300px;
    height:300px;
}

#example-percent-container-2{
    width: 300px;
    height:300px;
}

#example-percent-container-3{
    width: 300px;
    height:300px;
}

JavaScript

function newCircle(htmlId)
{
    return new ProgressBar.Circle(htmlId, {
        color: '#FCB03C',
        strokeWidth: 10,
        trailWidth: 10,
        duration: 1500,
        step: function(state, bar) {
            bar.setText((bar.value() * 100).toFixed(0) + '%');
        }
    });
}

var c1 = newCircle('#example-percent-container-1');
var c2 = newCircle('#example-percent-container-2');
var c3 = newCircle('#example-percent-container-3');

c1.animate(0.8);
c2.animate(0.8);
c3.animate(0.8);