JSFiddle - React, Tailwind, and code Playground

by Tan

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