JSFiddle - React, Tailwind, and code Playground

by Zdeněk Bauer

HTML

<canvas id="myCanvas" width="500" height="500">
Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var x = canvas.width / 2;
 var y = canvas.height / 2;
 var radius = 100;
 var endPercent = 95;
 var curPerc = 0;
 var circ = Math.PI * 2;
 var quart = Math.PI / 2;
 var time = 10;
 var text = "jQuery"
 var textSize = 40;

 context.lineWidth = 20;
 context.strokeStyle = '#4DC8F8';
 context.shadowOffsetX = 0;
 context.shadowOffsetY = 0;
 context.shadowBlur = 0;
 context.shadowColor = '#656565';
 context.font = textSize + "px sans-serif";
 context.textAlign = 'center';
 context.textBaseline = 'middle';

 function animate(current) {
     curPerc++;
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.beginPath();
     context.fillText(curPerc + '%', x, y - (textSize / 2));
     context.fillText(text, x, y + (textSize / 2));
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
     context.stroke();
     if (curPerc < endPercent) {
         setTimeout(function(){
             animate(curPerc / 100)
         }, time)
     }
 }

 animate();