JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<svg class="loader" id="loader-svg" viewBox="0 0 50 50" data-value="66">

    <path class="bg" d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12;stroke-opacity:1" />
    <path class="meter" d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12;stroke-opacity:1" stroke-dasharray="316.6" stroke-dashoffset="316.6" />
   <text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">00:00</text>
</svg>