JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="600" height="600"></canvas>
<div>Alpha: <i class="alpha"></i></div>
<div>CurrentTime: <i class="currentTime"></i></div>
<div>Time: <i class="time"></i></div>
<div>Left: <i class="left"></i></div>
<div>Top: <i class="top"></i></div>

JavaScript

let canvas = document.querySelector('canvas');
 let ctx = canvas.getContext('2d');

 let x = canvas.width / 2;
 let y = canvas.height / 2;
 let r = x - 20;

 let currentTime = Date.now();
 let alpha = 2 * Math.PI;
let duration = 2000;


 const point = (t) => {

   let left = x + r * Math.cos(-Math.PI / 2 + t - Math.PI / 2);
   let top = y + r * Math.sin(Math.PI / 2 + t - Math.PI / 2);

   document.querySelector('.currentTime').textContent = currentTime + "";
	 document.querySelector('.alpha').textContent = alpha + "";
	 document.querySelector('.time').textContent = t;
	 document.querySelector('.left').textContent = `${x} + ${r} * Math.cos(${alpha} * ${t}) = ${left}`;
	 document.querySelector('.top').textContent = `${y} + ${r} * Math.sin(${-alpha} * ${t}) = ${left}`;

   ctx.clearRect(0, 0, 600, 600);

		// Layout line
   ctx.beginPath();
   ctx.lineWidth = 10;
   ctx.strokeStyle = '#c1c1c1';
   ctx.arc(x, y, r, 0, 6.3, false);
   ctx.stroke();

		// Load line
   ctx.beginPath();
   ctx.lineWidth = 10;
   let gradient = ctx.createLinearGradient(0, 253, 600, 600);
       gradient.addColorStop(0, 'rgb(107, 91, 195)');
       gradient.addColorStop(0.3, 'rgb(54, 79, 193)');
       gradient.addColorStop(0.6, 'rgb(184, 214, 253)');
       gradient.addColorStop(1, 'rgb(60, 85, 195)');
   ctx.strokeStyle = gradient;
   ctx.arc(x, y, r, -Math.PI / 2, -Math.PI / 2 + t, false);
   ctx.stroke();

		// Point
   ctx.beginPath();
   ctx.fillStyle = '#546ecf';
   ctx.arc(top, left, 15, 0, alpha, false);
   ctx.fill();
		
   ctx.beginPath();
   ctx.fillStyle = '#ffffff';
   ctx.arc(top, left, 7.5, 0, alpha, false);
   ctx.fill();

		// Percent load line
   ctx.font = 'bold 40px Tahoma';
   ctx.fillStyle = 'rgb(54, 79, 193)';
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';

   let percent = () => Math.round(t * 100 / alpha);

   ctx.fillText(percent() + '%', 300, 300);

 };
  
 let startPoint = setInterval(function() {
   let time = (Date.now() - currentTime) /...