JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<svg class="progress-ring" width="220px" height="220px">

<g style="
">
  <circle class="progress-ring__circle" stroke="white" stroke-width="4" fill="transparent" r="52" cx="60" cy="60" style="stroke-dasharray: 375.726, 61.726;stroke-dashoffset: 77.33;stroke: #ffffff;r: 52px;stroke-width: 64px;fill: #d83024;cx: 83;cy: 88;transform: rotate(15deg);transition: all 2s;"></circle>

    
    <circle class="progress-ring__circle" stroke="white" stroke-width="4" fill="transparent" r="52" cx="60" cy="60" style="stroke-dasharray: 292.726, 258.726;stroke-dashoffset: 195.372;stroke: #cd3434;r: 44px;stroke-width: 17px;cx: 109px;cy: 49px;transform: rotate(37deg);"></circle><circle class="progress-ring__circle" stroke="white" stroke-width="4" fill="transparent" r="52" cx="60" cy="60" style="stroke-dasharray: 290.726, 258.726;stroke-dashoffset: 188.372;stroke: #cd3434;r: 42px;stroke-width: 17px;cx: -69;cy: -97;transform: rotate(187deg);"></circle>
</g>
</svg>