JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progress_container">
            <svg id="progress_dial" width="212px" height="212px">
				<path d="M 0 106 C 0 47.4571 47.4571 0 106 0 C 164.5429 0 212 47.4571 212 106 C 212 164.5429 164.5429 212 106 212 C 47.4571 212 0 164.5429 0 106 Z" fill="#e0e1e5"/>
				<path opacity="0.3882" d="M 106.5 0.5 L 106.5 212.5 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 133.9519 3.9825 L 79.0822 208.7587 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 159.517 14.5719 L 53.517 198.1693 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 181.4704 31.4173 L 31.5637 181.3239 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 198.3157 53.3706 L 14.7183 159.3706 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 208.9052 78.9358 L 4.1289 133.8054 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 212.517 106.3706 L 0.517 106.3706 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 209.0346 133.8224 L 4.2583 78.9528 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 198.4451 159.3876 L 14.8478 53.3876 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 181.5998 181.341 L 31.6931 31.4343 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 159.6464 198.1863 L 53.6465 14.5889 " stroke="#ffffff" stroke-width="1"/>
				<path opacity="0.3882" d="M 134.0813 208.7758 L 79.2116 3.9995 " stroke="#ffffff" stroke-width="1"/>
            </svg>
    		<div id="progress_shadow">
                <div id="progress_content">
                    <h1 id="progress_percentage" title="0%">0%</h1>
                </div>
            </div>
            <canvas id="progress" width="212" height="212"></canvas>
        </div>

CSS

html,body {
				background: #f5f5f5;
			}
			
			#progress_container {
				position: absolute;
				border-radius: 50%;
				width: 240px;
				height: 240px;
				top: 50%;
				left: 50%;
				margin-top: -120px;
				margin-left: -120px;
				background: #D0D2D5;
				background: -moz-linear-gradient(top,  #d0d2d5 0%, #ffffff 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0d2d5), color-stop(100%,#ffffff));
				background: -webkit-linear-gradient(top,  #d0d2d5 0%,#ffffff 100%);
				background: -o-linear-gradient(top,  #d0d2d5 0%,#ffffff 100%);
				background: -ms-linear-gradient(top,  #d0d2d5 0%,#ffffff 100%);
				background: linear-gradient(to bottom,  #d0d2d5 0%,#ffffff 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d2d5', endColorstr='#ffffff',GradientType=0 );
				-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.15);
				-moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.15);
				box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.15);
				z-index: 5;
			}
			
			#progress_dial {
				position: absolute;
				border-radius: 50%;
				width: 212px;
				height: 212px;
				margin: 14px;
				-webkit-box-shadow: inset 0px 3px 5px 0px rgba(5,71,110,0.51), inset 0px 0px 19px 0px rgba(0,0,0,0.2);
				-moz-box-shadow: inset 0px 3px 5px 0px rgba(5,71,110,0.51), inset 0px 0px 19px 0px rgba(0,0,0,0.2);
				box-shadow: inset 0px 3px 5px 0px rgba(5,71,110,0.51), inset 0px 0px 19px 0px rgba(0,0,0,0.2);
				z-index: 6;
			}
			
			#progress_shadow {
				position: absolute;
				border-radius: 50%;
				width: 212px;
				height: 212px;
				margin: 14px;
				-webkit-box-shadow: inset 0px 3px 5px 0px rgba(5,71,110,0.51), inset 0px 0px 19px 0px rgba(0,0,0,0.2);
				-moz-box-shadow: inset 0px 3px 5px 0px rgba(5,71,110,0.51), inset 0px 0px 19px 0px rgba(0,0,0,0.2);
				box-shadow: inset 0px 3px 5px 0px rgba(5,71,110,0.51), inset 0px 0px 19px 0px rgba(0,0,0,0.2);
				z-index: 8;
			}
			
			#progress {
				position:...

JavaScript

$(document).ready(function(){
    function convertToRadians(degree) {
        return degree*(Math.PI);
    }
    
    var canvas = document.getElementById('progress');
    var context = canvas.getContext('2d');
    
    function showProgress(percent){
        console.log(percent);
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var sections = 6;
        var radius = 106;
        
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        var grd = context.createLinearGradient(canvas.width, 0, 0, canvas.height);
        grd.addColorStop(0, '#d586f4');   
        grd.addColorStop(1, '#5c00d2');
        context.fillStyle = grd;
        context.fill();
        
        context.beginPath();
        if (percent){
            var amt = ((2 / 100) * percent) + 1.5;
            if (amt > 2) amt = amt - 2;
            context.arc(centerX, centerY, radius, amt * Math.PI, 1.5 * Math.PI, false); //25%
        } else context.arc(centerX, centerY, radius, 0 * Math.PI, 2 * Math.PI, false); //0%
        
        context.lineWidth = (radius - .3) * 2;
        context.strokeStyle = '#ffffff';
        context.stroke();
    }
    
    var timer = setInterval(function(){ runTimer() }, 20);
    var t = 0;
    
    function runTimer(){
        if (t == 101) stopTimer();
        context.clearRect(0, 0, canvas.width, canvas.height);
        showProgress(t);
        t++;
    }
    
    function stopTimer() {
        clearInterval(myVar);
    }
});