JSFiddle - React, Tailwind, and code Playground

by Slava Slava

HTML

<canvas class="circleAnim" width="130" height="130" data-anim-color="blue" data-progress="10"></canvas>
<canvas class="circleAnim" width="130" height="130" data-anim-color="blue" data-progress="80"></canvas>
<canvas class="circleAnim" width="130" height="130" data-anim-color="blue" data-progress="280"></canvas>

CSS

.circleAnim {
    background:#ccc;
    padding:0;
}

JavaScript

var canvas = document.createElement( 'canvas' );
var canvasSupported = canvas.getContext;
if( canvasSupported ) {
    $( '.circleAnim' ).each( function() {
    
      var canvasList=$(this)[0],
        duration=6000/60|0,
        current=0,
        max=500;
      var animColor = $('.circleAnim').attr('data-anim-color');
      var animProgress = $('.circleAnim').attr('data-progress');
      var a=webkitRequestAnimationFrame(animate);
      function animateC(p,C,K){
      var c=C.getContext("2d"),
      centerAnim=C.width/2,
      radiusAnim=centerAnim-c.lineWidth,
      angleCenter=(-90/180)*Math.PI,
      p=p||0,
      e=(((p*animProgress|0)-90)/180)*Math.PI;
      c.clearRect(0,0,C.width,C.height);
      c.fillStyle=K;
      c.beginPath();
      c.arc(centerAnim,centerAnim,radiusAnim,angleCenter,e);
      c.lineWidth=2.5;
      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),canvasList, animColor);
       ++current>duration||(a=webkitRequestAnimationFrame(animate));
      }
    
    });
}