JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://www.cssscript.com/demo/pure-css-circular-percentage-bar/css/circle.css">
<div class="c100 p0" id="div_loading_progress"><span id="span_progress">0%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
JavaScript
var pct = 0,
span_progress = document.getElementById("span_progress"),
div_loading_progress = document.getElementById("div_loading_progress");
function display_pct(p) {
span_progress.innerHTML=""+p+"%";
div_loading_progress.className="c100 p"+p;
}
function update_pct(){
display_pct(pct++);
if (pct<=100) {
setTimeout(update_pct,50);
}
}
setTimeout(update_pct,90);