JSFiddle - React, Tailwind, and code Playground

by Symphony

HTML

<div class="circle">37%</div>
<div class="circle">27%</div>
<div class="circle">84%</div>
<div class="circle">99%</div>
<div class="circle">65.4%</div>

CSS

.circle {
    display: block;
    float: left;
}
circle {
  fill: rgba(0,0,0,0);
  stroke: #eee;
  stroke-width: 2;
  stroke-dasharray: 95px 95px;
}
circle:nth-child(2n) {
  fill: rgba(0,0,0,0);
  stroke: #30bae7;
  stroke-width: 2;
}

JavaScript

var Circle = function(sel){
    var circles = document.querySelectorAll(sel);
    [].forEach.call(circles,function(el){
        var valEl = parseFloat(el.innerHTML);
        valEl = valEl*95/100;
        el.innerHTML = '<svg width="60" height="60"><circle transform="rotate(-90)" r="15" cx="-30" cy="30" /><circle transform="rotate(-90)" style="stroke-dasharray:'+valEl+'px 95px;" r="15" cx="-30" cy="30" /></svg>';
        
    });
};
Circle('.circle');