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: 200px;
    height:200px;
    margin: 20px;
}

#example-percent-container-2{
    width: 200px;
    height:200px;
    margin: 20px;
}

#example-percent-container-3{
    width: 200px;
    height:200px;
    margin: 20px;
}

JavaScript

function showProgressBar (selector, percent) {
    var params = {
        color: '#FCB03C',
        strokeWidth: 10,
        trailWidth: 10,
        duration: 1500,
        step: function(state, bar) {
            bar.setText((bar.value() * 100).toFixed(0) + '%');
        }
    };

    var circle = new ProgressBar.Circle(selector, params);

    circle.animate(percent / 100);
}

showProgressBar('#example-percent-container-1', 80);
showProgressBar('#example-percent-container-2', 70);
showProgressBar('#example-percent-container-3', 58);