JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<svg height="600" width="600" class="spinner__circle" shape-rendering="geometricPrecision" viewBox="0 0 170 170">
    <circle class="spinner__background" r="80" cx="85" cy="85" fill="transparent" style="stroke-dasharray: 502.655; stroke-dashoffset: 0; stroke-width: 30; stroke: rgba(0, 0, 0, 0);"></circle>
    <circle class="spinner__foreground" r="80" cx="85" cy="85" fill="transparent" style="stroke-dasharray: 502.655; stroke-dashoffset: 0px; stroke-width: 30; stroke: rgb(255, 255, 255);"></circle>
</svg>

CSS

body {
    background: red;
}

svg {
    transform-origin: top;

}