JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="250" height="250"></canvas>
<canvas id="myCanvas2" width="250" height="250"></canvas>

CSS

body {
       margin: 0px;
       padding: 0px;
       background: #f1ecec;
   }
   #myCanvas, #myCanvas2 {
       border: blue 0px solid;
   }

JavaScript

// requestAnimationFrame Shim
(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();


var canvas = document.getElementById('myCanvas');
var canvas2 = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
var context2 = canvas2.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 35;
var endPercent = 95;
var endPercent2 = 85;
var curPerc = 0;
var curPerc2 = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';

context2.lineWidth = 10;
context2.strokeStyle = '#ad2323';
context2.shadowOffsetX = 0;
context2.shadowOffsetY = 0;
context2.shadowBlur = 10;
context2.shadowColor = '#656565';

function animate(current) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context2.clearRect(0, 0, canvas.width, canvas2.height);
    context.beginPath();
    context2.beginPath();
    context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);

    if (curPerc2 < endPercent2) {
        context2.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
        console.log(current);
    } else {
        context2.arc(x, y, radius, -(quart), ((circ) * 0.45) - quart, false);
    }
    context.stroke();
    context2.stroke();

    curPerc++;
    curPerc2++;
    if (curPerc < endPercent) {
        requestAnimationFrame(function () {
            animate(curPerc / 100);
        });
    }
}

animate();