JSFiddle - React, Tailwind, and code Playground

by Ajith S Punalur

HTML

<div class="demo">
    <svg class="progress" width="120" height="120" viewBox="0 0 120 120">
        <circle class="progress__meter" cx="60" cy="60" r="54" stroke-width="12" />
        <circle class="progress__value" cx="60" cy="60" r="54" stroke-width="12" />
    </svg>
    <input id="control" type="range" value="60" />
</div>

CSS

.u-absoluteCenter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.u-flexCenter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.u-offscreen {
  position: absolute;
  left: -999em;
}
.demo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.demo :first-child {
  margin-bottom: 20px;
}
.progress {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.progress__meter,
.progress__value {
  fill: none;
}
.progress__meter {
  stroke: #e6e6e6;
}
.progress__value {
  stroke: #f77a52;
  stroke-linecap: round;
}

JavaScript

var control = document.getElementById('control');
var progressValue = document.querySelector('.progress__value');

var RADIUS = 54;
var CIRCUMFERENCE = 2 * Math.PI * RADIUS;

function progress(value) {
    var progress = value / 100;
    var dashoffset = CIRCUMFERENCE * (1 - progress);
    
    console.log('progress:', value + '%', '|', 'offset:', dashoffset)
    
    progressValue.style.strokeDashoffset = dashoffset;
}

control.addEventListener('input', function(event) {
    progress(event.target.valueAsNumber);
});

progressValue.style.strokeDasharray = CIRCUMFERENCE;
progress(60);