JSFiddle - React, Tailwind, and code Playground

HTML

<div class="data-square-percentage" data-type="square-percentage" data-id="percentage" data-value="25">
  <div class="label"></div>
  <canvas></canvas>
</div>

<div class="data-square-percentage-2" data-type="square-percentage" data-id="percentage-2" data-value="50">
  <div class="label"></div>
  <canvas></canvas>
</div>

CSS

body {
  font-family: 'Helvetica', sans-serif;
}

.data-square-percentage,
.data-square-percentage-2
{
  width: 250px;
  height: 250px;
  margin: 10px 20px 0;
  background: #EEE;
  float: left;
  position: relative;
}

.label {
  width: 100%;
  height: 50px;
  margin: auto;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  font-size: 50px;
  color: #000;
  text-align: center;
}

JavaScript

$(document).ready(function() {
  
  var fps = 40;
  var now;
  var then = Date.now();
  var interval = 1000/fps;
  var delta;
  
  $('[data-type="square-percentage"]').each(function() {
    var pdata = {
      width: $(this).width(),
      height: $(this).height(),
      canvas: $(this).children('canvas'),
      percentWidth: $(this).width() / 10,
      percentHeight: $(this).height() / 10,
      elID: $(this).data('id'),
      percent: $(this).data('value')
    }
   
   $(this).children('.label').text(pdata.percent + '%');
    pdata.canvas.attr({
      'width': pdata.width,
      'height': pdata.height,
      'id': pdata.elID
    });
    
    pdata.ctx = document.getElementById(pdata.elID).getContext("2d");
    pdata.ctx.beginPath();
    pdata.ctx.fillStyle = "#ff008d";
    pdata.ctx.strokeStyle = "#ffdbef";
    pdata.ctx.globalAlpha = 1;
    
    
    for (i = 0, k = 0, r = 0; i < pdata.percent; i++, k++) {
      if (k > 9) k = 0, r++;
      pdata.ctx.restore();
      pdata.ctx.rect((pdata.percentWidth * k), (pdata.percentHeight * r), pdata.percentWidth, pdata.percentHeight);
      pdata.ctx.fill();
      pdata.ctx.stroke();
      pdata.ctx.save();
    }
  });
});