JSFiddle - React, Tailwind, and code Playground

by Olbery Obitovan

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

var circle = new ProgressBar.Circle('#example-percent-container-1', {
    color: '#FCB03C',
    strokeWidth: 10,
    trailWidth: 10,
    duration: 1500,
    step: function(state, bar) {
        bar.setText((bar.value() * 100).toFixed(0) + '%');
    }
});

circle.animate(0.8);

var circle = new ProgressBar.Circle('#example-percent-container-2', {
    color: '#FCB03C',
    strokeWidth: 10,
    trailWidth: 10,
    duration: 1500,
    step: function(state, bar) {
        bar.setText((bar.value() * 100).toFixed(0) + '%');
    }
});

circle.animate(0.7);

var circle = new ProgressBar.Circle('#example-percent-container-3', {
    color: '#FCB03C',
    strokeWidth: 10,
    trailWidth: 10,
    duration: 1500,
    step: function(state, bar) {
        bar.setText((bar.value() * 100).toFixed(0) + '%');
    }
});

circle.animate(0.58);