JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="200" height="200"></canvas>

CSS

canvas { border: 1px solid; }

JavaScript

var center = {x : 100, y: 100};        // центр окружности
var innerRadius = 80;                  // внутренний радиус дуги
var outerRadius = 90;                  // внешний радиус дуги
var angle = 0;                         // начальный угол (по умолчанию "от 12 часов")
var duration = 5000;                   // длительность в миллисекундах
var fps = 50;                          // FPS

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var step = Math.PI * 2 * 1000 / fps / duration;

function test() {
    if (angle < Math.PI * 2) {
        var x0 = Math.sin(angle), y0 = -Math.cos(angle), x1 = Math.sin(angle + step), y1 = -Math.cos(angle + step);
        context.beginPath();
        context.moveTo(center.x + innerRadius * x0, center.y + innerRadius * y0);
        context.lineTo(center.x + outerRadius * x0, center.y + outerRadius * y0);
        context.stroke();
        context.arc(center.x, center.y, outerRadius, -Math.PI/2 + angle,  -Math.PI/2 + angle + step, false);
        context.stroke();
        context.moveTo(center.x + innerRadius * x1, center.y + innerRadius * y1);
        context.lineTo(center.x + outerRadius * x1, center.y + outerRadius * y1);
        context.stroke();
        context.arc(center.x, center.y, innerRadius, -Math.PI/2 + angle,  -Math.PI/2 + angle + step, false);
        context.stroke();
        context.fill();
        
       
        angle += step;
    }
    else clearInterval(timer);
}

var timer = window.setInterval(test, 1000 / fps);