JSFiddle - React, Tailwind, and code Playground

by resistdesign

HTML

<svg
 style="width: 1em; height: 1em;"
 viewBox="0, 0, 36, 36"
>
  <g
    class="circ-group"
  >
    <circle
    class="circ"
    cx="18"
    cy="18"
    r="16"
    fill="none"
    stroke-location="inside"
    stroke-width="3"
    stroke-miterlimit="20"
    stroke="rgb(57, 73, 171)"
    >
    </circle>
  </g>
</svg>
<br/>
style="stroke: rgb(57, 73, 171); stroke-linecap: round; transition: all 750ms ease-in-out 0ms; stroke-dasharray: 39.5841, 56.5487; stroke-dashoffset: -16.9646;"

CSS

body {
  font-size: 3em;
}

.circ-group {
  stroke-dashoffset: 5;
  animation: CircularProgressOffsetFrames 1s infinite linear;
  stroke-dasharray: 5,95;
}

.circ {
  animation: CircularProgressLengthFrames 2.5s infinite linear;
}

@keyframes CircularProgressOffsetFrames {
  0% {
    stroke-dashoffset: 5;
  }
  100% {
    stroke-dashoffset: -95;
  }
}

@keyframes CircularProgressLengthFrames {
  0% {
    stroke-dasharray: 5,95;
  }
  25% {
    stroke-dasharray: 45,55;
  }
  40% {
    stroke-dasharray: 75,25;
  }
  100% {
    stroke-dasharray: 5,95;
  }
}