JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<dl>
  <dt>2%</dt>
  <dd class="example-1">
      <div class="downloads-indicator-progress-inner"></div>
  </dd>
  <dt>26%</dt>
  <dd class="example-2">
      <div class="downloads-indicator-progress-inner"></div>
  </dd>
  <dt>76%</dt>
  <dd class="example-3">
      <div class="downloads-indicator-progress-inner"></div>
  </dd>
</dl>

CSS

body {
  --toolbarbutton-icon-fill-attention: red;
}

.example-1 {
  --download-progress-pcent: 2%;
}

.example-2 {
  --download-progress-pcent: 26%;
}

.example-3 {
  --download-progress-pcent: 76%;
}

.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();
  }
});