JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<div class="circle"><div class="diag"></div><span class="data">37%</span></div>
<div class="circle"><div class="diag"></div><span class="data">27%</span></div>
<div class="circle"><div class="diag"></div><span class="data">84%</span></div>
<div class="circle"><div class="diag"></div><span class="data">99%</span></div>

CSS

.circle {
    display: block;
    float: left;
    position: relative;
}
.data {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
circle {
  fill: rgba(0,0,0,0);
  stroke: #eee;
  stroke-width: 15;
  stroke-dasharray: 408px 408px;
}
circle:nth-child(2n) {
  fill: rgba(0,0,0,0);
  stroke: #30bae7;
  stroke-width: 15;
}

JavaScript

var Circle = function(sel){
    var circles = document.querySelectorAll(sel);
    [].forEach.call(circles,function(el){
        var valEl = parseFloat(el.querySelector('.data').textContent);
        valEl = valEl*408/100;
        el.querySelector('.diag').innerHTML = '<svg width="160" height="160"><circle transform="rotate(-90)" r="65" cx="-80" cy="80" /><circle transform="rotate(-90)" style="stroke-dasharray:'+valEl+'px 408px;" r="65" cx="-80" cy="80" /></svg>';
        
    });
};
Circle('.circle');