JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="90" height="90"></canvas>

<input type="button" id="run" value="go for it!">

JavaScript

var canvas = document.getElementById('canvas');
if (!canvas.getContext) {
    return false;
}

var ctx = canvas.getContext('2d');


/* in canvas 0 degrees angle is on the right of a circle,
while we want to start at the top of the circle.
We'll use this variable to compensate the difference. */
var relativeAngle = 270;

function drawCanvas() {
    
    ctx.clearRect(0, 0, 90, 90);
    //light blue circle
    ctx.lineWidth = 20;
    ctx.strokeStyle = '#D8E8F7';
    ctx.beginPath();
    ctx.arc(45, 45, 35, 0, 2*Math.PI);
    ctx.stroke();
    
    //dark blue circle
    ctx.strokeStyle = '#66ADF4';
    ctx.beginPath();
    //notice the angle conversion from degrees to radians in the 5th argument
    ctx.arc(45, 45, 35, 1.5*Math.PI, ((angle + relativeAngle) / 180) * Math.PI);
    ctx.stroke();
    
    //text
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillStyle = '#666';
    ctx.font = 'bold 14px serif';
    // angle conversion to percentage value
    ctx.fillText(parseInt(100 * angle / 360).toString() + '%', 45, 45);
}

var angle = 0;
function timeout() {
    angle = parseInt(360 * percent / 100);
    drawCanvas();
    
    if (angle > 360) {
        document.getElementById('run').disabled = false;
        percent = 0;
        return;
    }
    
    percent++;
    setTimeout(timeout, 10);
};

drawCanvas();

var percent = 0;
document.getElementById('run').onclick = function() {
    this.disabled = true;
    timeout();
};