JSFiddle - React, Tailwind, and code Playground

by sophtwhere

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,100);