JSFiddle - React, Tailwind, and code Playground

by Slava Slava

HTML

<canvas width="128" height="128"></canvas>

JavaScript

function animateC(p,C,K){
var c=C.getContext("2d"),
x=C.width/2,
r=x-(x/4),
s=(-90/180)*Math.PI,
p=p||0,
e=(((p*360|0)-90)/180)*Math.PI;
c.clearRect(0,0,C.width,C.height);
c.fillStyle=K;
c.textAlign='center'; 
c.font='bold '+(x/2)+'px Arial';
c.fillText(p*100|0,x,x+(x/5));
c.beginPath();
c.arc(x,x,r,s,e);
c.lineWidth=x/2;
c.strokeStyle=K;
c.stroke();
}

function bounceOut(k){
 return k<1/2.75?
 7.5625*k*k:k<2/2.75?
 7.5625*(k-=1.5/2.75)*k+.75:k<2.5/2.75?
 7.5625*(k-=2.25/2.75)*k+.9375:
 7.5625*(k-=2.625/2.75)*k+.984375
}
function animate(){
 animateC(bounceOut(current/duration),canvas,'rgba(127,227,127,0.3)');
 ++current>duration||(a=webkitRequestAnimationFrame(animate));
}
var canvas=document.getElementsByTagName('canvas')[0],
    duration=6000/60|0,
    current=0,
    max=500;
var a=webkitRequestAnimationFrame(animate);