JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pie anim hollow" data-progress="10%" data-stroke="darkred"><h3>10%</h3></div>
<div class="pie anim hollow" data-progress="25%" data-stroke="gold"><h3>25%</h3></div>
<div class="pie anim hollow" data-progress="50%" data-stroke="lightblue"><h3>50%</h3></div>
<div class="pie anim hollow" data-progress="75%" data-stroke="turquoise"><h3>75%</h3></div>
<div class="pie anim hollow" data-progress="100%" data-stroke="lightgreen"><h3>100%</h3></div>

SCSS

$mutedColor: rgba(0,0,0,.25);

@keyframes fillup-pie {
  from { stroke-dasharray: 0 100; stroke: rgba(255,255,255,0); }
}
.pie {
  & svg {
    width: 100%; height: auto;
    transform: rotate(-90deg);
    background: $mutedColor;
    border-radius: 50%;
  }

  & > svg > circle:nth-child(1) {
    fill: $mutedColor;
    stroke-width: 32;
  }
  &.anim circle:nth-child(1) {
    animation: fillup-pie 1.5s 1 ease-out forwards;
  }
}

/* Specific Settings for this Demo */
.pie {
  padding: 1rem;
  margin: 0 auto;
  max-width: 200px;
  & h3 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin: 2rem 0 1rem;
  }
}
@media (min-width: 25em) {
  .pie {
    max-width: initial;
    width: 20%;
    padding: 1em;
    box-sizing: border-box;
    float: left;
    
    & h3 {
      font-size: 1.25em;
    }
  }
}
@media (min-width: 50em) {
  .pie {
    & h3 {
      font-size: 1.5em;
    }
  }
}

JavaScript

(function($) {
	//
  // Inspired by the work of
  // http://lea.verou.me/
  // https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/
  //
  var NS = "http://www.w3.org/2000/svg";
  
	var createSVGCircle = function(r,cx,cy) {
  	var circle = document.createElementNS(NS, "circle");
    circle.setAttribute("r", r);
    circle.setAttribute("cx", cx);
    circle.setAttribute("cy", cy);
    return circle;
  };
  
  var createCanvas = function() {
  	var svg = document.createElementNS(NS, "svg");
    svg.setAttribute("viewBox", "0 0 32 32");
    return svg;
  }
  
  var i=0;
  
  $('.pie').each( function() {
  	i++;
    
    var pie = $(this);
    
    var p = parseFloat(pie.data("progress"));
    if(p === 100) { // weird fix for 100%
    	p = 101;
    }
    
    var svg = createCanvas();
    var circleProgress = createSVGCircle(16,16,16);
    circleProgress.setAttribute("stroke-dasharray", p + " 100");
    circleProgress.setAttribute("stroke", (pie.data('stroke') || 'yellowgreen') );
    
    svg.appendChild(circleProgress);
    if(pie.hasClass('hollow')) {
	    var circleCutout = createSVGCircle(11,16,16);
      circleCutout.setAttribute("fill", (pie.data('knockout-color') || 'white') );
  	  svg.appendChild(circleCutout);
    }
    pie.append(svg);
  });
})(jQuery);