JSFiddle - React, Tailwind, and code Playground

by hydhaval

HTML

<div>
  <svg height="20" viewBox="0 0 20 20" width="20">
    <circle class="rotation_circle_ahead_4 inner_circle"></circle>
    <circle class="rotation_circle_ahead_3 inner_circle"></circle>
    <circle class="rotation_circle_ahead_2 inner_circle"></circle>
    <circle class="rotation_circle_ahead_1 inner_circle"></circle>
    <circle class="rotation_circle_optimized inner_circle"></circle>
    <circle class="rotation_circle_behind_1 inner_circle"></circle>
    <circle class="rotation_circle_behind_2 inner_circle"></circle>
    <circle class="rotation_circle_behind_3 inner_circle"></circle>
    <circle class="rotation_circle_behind_4 inner_circle"></circle>
  </svg>
</div>

CSS

.inner_circle {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  cx: 10;
  cy: 10;
  fill: none;
  r: 9;
  stroke-dasharray: 56.548667764616276;
  stroke-width: 2;
  stroke-dashoffset: 180.9;
  stroke: rgb(188, 192, 196);
  transform-origin: 50% 50%;

}

.rotation_circle_ahead_4 {
  animation-name: rotationAhead4;
}

@keyframes rotationAhead4 {
  0% {
    animation-timing-function: cubic-bezier(0.25, 0.13, 0.69, 0.82);
    transform: rotate(-384deg);
  }

  25% {
    animation-timing-function: cubic-bezier(0.22, 0.13, 0.76, 0.85);
    transform: rotate(-102deg);
  }

  50% {
    animation-timing-function: cubic-bezier(0.22, 0.18, 0.76, 0.8);
    transform: rotate(80deg);
  }

  75% {
    animation-timing-function: cubic-bezier(0.34, 0.42, 0.81, 0.75);
    transform: rotate(258deg);
  }

  100% {
    animation-timing-function: cubic-bezier(0.34, 0.42, 0.81, 0.75);
    transform: rotate(696deg);
  }
}

.rotation_circle_ahead_3 {
  animation-name: rotationAhead3;
}

@keyframes rotationAhead3 {
  0% {
    animation-timing-function: cubic-bezier(0.25, 0.21, 0.69, 0.72);
    transform: rotate(-354deg);
  }

  25% {
    animation-timing-function: cubic-bezier(0.22, 0.13, 0.76, 0.85);
    transform: rotate(-102deg);
  }

  50% {
    animation-timing-function: cubic-bezier(0.26, 0.48, 0.72, 0.52);
    transform: rotate(104deg);
  }

  75% {
    animation-timing-function: cubic-bezier(0.34, 0.35, 0.81, 0.79);
    transform: rotate(258deg);
  }

  100% {
    transform: rotate(728deg);
  }
}

.rotation_circle_ahead_2 {
  animation-name: rotationAhead2;
}

@keyframes rotationAhead2 {
  0% {
    animation-timing-function: cubic-bezier(0.25, 0.21, 0.69, 0.72);
    transform: rotate(-318deg);
  }

  25% {
    animation-timing-function: cubic-bezier(0.22, 0.13, 0.76, 0.85);
    transform: rotate(-102deg);
  }

  50% {
    animation-timing-function: cubic-bezier(0.26, 0.48, 0.72, 0.52);
    transform: rotate(130deg);
  }

  75% {
    animation-timing-function:...