JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<svg class="CircularProgressbar " viewBox="0 0 100 100" data-test-id="CircularProgressbar">
                                      <path class="CircularProgressbar-trail" d="
                          M 50,50
                          m 0,-25
                          a 25,25 0 1 1 0,50
                          a 25,25 0 1 1 0,-50
                        " stroke-width="50" fill-opacity="0" style="stroke-linecap: butt; stroke-dasharray: 157.08px, 157.08px; stroke-dashoffset: 0px;">
                                      </path>
                                      <path class="CircularProgressbar-path" d="
                          M 50,50
                          m 0,-25
                          a 25,25 0 1 1 0,50
                          a 25,25 0 1 1 0,-50
                        " stroke-width="50" fill-opacity="0" style="stroke-linecap: butt; stroke-dasharray: 157.08px, 157.08px; stroke-dashoffset: 58.1195px;">
                                      </path>
                                    </svg>

CSS

.CircularProgressBar {
  display: flex;
  width: 1.9em;
  height: 1.9em;
  justify-content: center;
  align-items: center;
}