JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="thecanvas"></canvas>

JavaScript

window.drawCircle = function(x, y){
    var can = document.getElementById('thecanvas'),
        ctx = can.getContext('2d'),
        segments = 10,
        currentSegment = 0,
        toRadians = function(deg){
            return ( Math.PI / 180 ) * deg;
        },
        getTick = function(num){
            var tick = toRadians(360) / segments;
            return tick * num;
        },
        segment = function(start, end){
            start = start || getTick(currentSegment);
            end = end || getTick(currentSegment + 1);
            ctx.clearRect(0,0,500,500);
            ctx.beginPath();
            ctx.arc(x, y, 60, 0, end);
            ctx.stroke();
            ctx.closePath();
        };

    can.width = window.innerWidth;
    can.height = window.innerHeight;

    ctx.lineWidth = 50;
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
    
    setTimeout(function render(){
        segment(getTick(currentSegment), getTick(currentSegment + 1));
        currentSegment += 1;
        if (currentSegment < segments){
            setTimeout(render, 250);
        } else {
            currentTick = 0;
        }
    }, 250);
};
drawCircle(150, 150);