JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<li class=percentCanvas data-kougiland-canvas-id=canvas1 data-kougiland-canvas-percentage=56 data-stroke-color=#1f9aab data-stroke-background=#7fbfc8 data-creativity=></li>
<li class=percentCanvas data-kougiland-canvas-id=canvas2 width="64" height="64" data-kougiland-canvas-percentage=96 data-stroke-color=#409f89 data-stroke-background=#92c2b7 data-creativity=></li>
<li class=percentCanvas data-kougiland-canvas-id=canvas3 data-kougiland-canvas-percentage=26 data-stroke-color=#ecd06f data-stroke-background=#e8dbaa data-creativity=></li>
<li class=percentCanvas data-kougiland-canvas-id=canvas4 width="64" height="64" data-kougiland-canvas-percentage=46 data-stroke-color=#df6c4f data-stroke-background=#e1a99a data-creativity=></li>

CSS

body {
       margin: 0px;
       padding: 0px;
       background: #f1ecec;
       -webkit-box-sizing: border-box;  
       box-sizing: border-box;  
   }

li{
    list-style:none;
    width:64px;
    height:64px;
    border-radius: 100%;
    position:relative;
    margin:10px;
}
figcaption{
    -webkit-box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
z-index: 1;
font-size: 24px;
line-height: 64px;
text-align: center;
}

JavaScript

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

 function animate(canvasID, endPercent,strokeStyle) {
     var canvas = document.getElementById(canvasID),
     context = canvas.getContext('2d');
     canvas.width  = '64';
     canvas.height = '64';
     var x = canvas.width / 2,
     y = canvas.height / 2,
     radius = 24,
     curPerc = 0,
     counterClockwise = false,
     circ = Math.PI * 2,
     quart = Math.PI / 2;
     context.lineWidth = 6;
     context.strokeStyle = strokeStyle;
     
     function render(current) {
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.beginPath();
         context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
         context.stroke();
         curPerc++;
         if (curPerc < endPercent) {
             requestAnimationFrame(function () {
                 render(curPerc / 100);
                 document.querySelector('.'+canvasID).innerHTML = curPerc/10;
             });
         }
     }
     render();
 }
 var allCanvas = document.querySelectorAll(".percentCanvas");
  
Array.prototype.slice.call(allCanvas).forEach( function(e){
 
	var percentage = e.dataset.kougilandCanvasPercentage, 
  		canvasID = e.dataset.kougilandCanvasId,
  		strokeStyle = e.dataset.strokeColor,
 		  strokebackground = e.dataset.strokeBackground;
      
  var	canvasElement = document.createElement("canvas"),
  		figcaption = document.createElement("figcaption");
  		 
      figcaption.classList.add(canvasID);
      canvasElement.setAttribute("id",canvasID);
      
    e.style.boxShadow = "inset 0 0 0 4px "+strokebackground;
   
    e.appendChild(figcaption) ;
    e.appendChild(canvasElement) ;
   
    animate( canvasID, percentage, strokeStyle);
});