JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<div id="downloads-indicator-progress-outer">
  <div id="downloads-indicator-progress-inner"></div>
</div>

<p>
Set download progress: <input id="dl-progress" type="number" min=0 max=100 value="45">
</p>

CSS

body {
  --toolbarbutton-icon-fill-attention: red;
  --download-progress-pcent: 45%;
}

#downloads-indicator-progress-inner {
  width: 56px;
  height: 56px;
  /*
    From javascript side we update the --download-progress-pcent variable to show the current progress
   */
  background: conic-gradient(var(--toolbarbutton-icon-fill-attention) var(--download-progress-pcent), transparent var(--download-progress-pcent));
  border-radius: 50%;
}

JavaScript

function updateProgress() {
  
    document.body.style.setProperty("--download-progress-pcent", document.getElementById("dl-progress").value + "%");
}
document.addEventListener("input", event => {
  if (event.target.id == "dl-progress") {
    updateProgress();
  }
});