JSFiddle - React, Tailwind, and code Playground

by Symphony

HTML

<div class="demo">
	<svg class="progress" width="140" height="140" viewBox="0 0 140 140">
  <defs>
    <filter id="dropshadow" x="-40%" y="-40%" width="180%" height="180%" filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
      <feOffset dx="10" dy="10" result="offsetblur"/> 
      <feOffset dx="-10" dy="-10" result="offsetblur"/>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
		<circle class="progress__meter" cx="70" cy="70" r="54" stroke-width="12" />
		<circle style="filter:url(#dropshadow)" class="progress__value" cx="70" cy="70" r="54" stroke-width="12" />
	</svg>
	<input id="control" type="range" value="60" />
</div>

CSS

.demo {
	flex-direction: column;
	
	&:first-child {
		margin-bottom: 20px;
	}
}

.progress {
	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);