JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<button type="buton" class="start">Нарисовать диаграмму</button>
<div class="circle"><div class="diag"></div><span class="data"></span></div>

CSS

.circle {
    display: block;
    float: left;
    position: absolute;

}
.data {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: #a2c8fb;
  ;
    

}
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: #a2c8fb;
  stroke-width: 15;
}

JavaScript

/*jslint node: true */
'use strict';
var Circle = function(sel){
    var circles = document.querySelectorAll(sel);
    [].forEach.call(circles,function(el){
        var valEl = prompt('Процент?', '0');
        el.querySelector('.data').textContent = valEl + '%'
        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>';
    });
};

var btns = document.querySelectorAll('.start');
btns.forEach(function(btn){
	btn.addEventListener('click', onStart)
})

function onStart(){
	Circle('.circle');
}