JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(100,100), rotate(-90), scale(1,-1)">
    <circle class="circle bg" cx="0" cy="0" r="60" />
    <circle class="circle bg" cx="0" cy="0" r="75" />
    <circle class="circle bg" cx="0" cy="0" r="90" />

    <circle class="circle fg" id="c1" cx="0" cy="0" r="60" />
    <circle class="circle fg" id="c2" cx="0" cy="0" r="75" />
    <circle class="circle fg" id="c3" cx="0" cy="0" r="90" />
  </g>
</svg>

CSS

.circle {
  fill: transparent;
  stroke-width: 8;  
}

.circle.bg {
  stroke: #CCC;
}

.circle.fg {
  stroke-linecap: round;
  stroke-dashoffset: -100;
  stroke-dasharray: 1000;
}

#c1 { stroke: #99F; }
#c2 { stroke: #66F; }
#c3 { stroke: #33F; }

JavaScript

/**
 * для вопроса https://qna.habr.com/q/1036476
 * Как сверстать пародию на тег progress в виде круга?
 */