JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<div class="neon-multimedia-player-overlay">
    <svg class="progress" width="120" height="120" viewBox="0 0 120 120">
        <circle class="progress-meter" cx="60" cy="60" r="54" stroke-width="6" />
        <circle class="progress-value" cx="60" cy="60" r="54" stroke-width="6" transform="rotate(-90 60 60)" />
        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">50%</text>  
    </svg>
    <input id="control" type="range" value="60">
</div>

SCSS

body {
  font-family:sans-serif;  
}

.neon-multimedia-player-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.progress-meter,
.progress-value {
  fill: none;
}
.progress-meter {
  stroke: #e6e6e6;
}
.progress-value {
  stroke: #16A085; //#f77a52;
  stroke-linecap: round;
  transition: 0.35s stroke-dashoffset;
  //animation: indeterminate 2s ease-out infinite;
}

@keyframes indeterminate {
  from {
    stroke-dashoffset:360;
    stroke-dasharray:90;
  }
  to {
    stroke-dashoffset:0;
  }
}

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;