JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<div class="j83agx80 taijpn5t">
  <svg class="r7fvqmod ee40wjg4 ega7oslk stwyh623 pf5603km ev399l9o lzcic4wl" height="20" viewBox="0 0 20 20" width="20" aria-busy="true" aria-valuemax="100" aria-valuemin="0" aria-valuetext="Загрузка…" role="progressbar" tabindex="0">
    <circle class="r7fvqmod ev399l9o ee40wjg4 emdzj9jj pf5603km l496fsh7" cx="10" cy="10" fill="none" r="9" stroke="var(--progress-ring-neutral-foreground)" stroke-dasharray="56.548667764616276" stroke-width="2" data-darkreader-inline-fill="" style="--darkreader-inline-fill:none;"></circle>
  </svg>
</div>

CSS

.taijpn5t {
    justify-content: center;
}

.j83agx80 {
    display: flex;
}
.lzcic4wl {
    outline-color: initial;
}
.stwyh623 {
    animation-timing-function: cubic-bezier(0,0,1,1);
}
.r7fvqmod {
    animation-duration: 2s;
}
.pf5603km {
    transform-origin: 50% 50%;
}
.ev399l9o {
    animation-fill-mode: both;
}
.ega7oslk {
    animation-name: ffxpx7bd-B;
}
.ee40wjg4 {
    animation-iteration-count: infinite;
}
.lzcic4wl {
    outline: none;
}

.r7fvqmod {
    animation-duration: 2s;
}
.pf5603km {
    transform-origin: 50% 50%;
}
.l496fsh7 {
    animation-name: kh5618li-B;
}
.ev399l9o {
    animation-fill-mode: both;
}
.emdzj9jj {
    animation-timing-function: cubic-bezier(.33,0,.67,1);
}
.ee40wjg4 {
    animation-iteration-count: infinite;
}

@keyframes kh5618li-B {
0% {
    stroke-dashoffset: 11.3;
    transform: rotate(-90deg);
}

25% {
    stroke-dashoffset: 50.9;
    transform: rotate(162deg);
}
50% {
    stroke-dashoffset: 25.4;
    transform: rotate(72deg);
}
75% {
    stroke-dashoffset: 50.9;
    transform: rotate(162deg);
}
100% {
    stroke-dashoffset: 11.3;
    transform: rotate(-90deg);
}
}

@keyframes ffxpx7bd-B {
0% {
    transform: rotate(-90deg);
}

25% {
    transform: rotate(90deg);
}
50% {
    transform: rotate(270deg);
}
75% {
    transform: rotate(450deg);
}
100% {
    transform: rotate(990deg);
}
}