JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="spinner">
   <circle cx="32" cy="32" r="29"></circle>
</svg>

CSS

html {
  --stroke-width: 6px;
  --size: 64px;
  --radius: calc(var(--size)/2 - var(--stroke-width)/2);
  --offset: calc(2 * 3.14 * var(--radius));
  --duration: 1.33s;
}

.spinner {
  width: calc(var(--radius) * 2 + var(--stroke-width));
  height: calc(var(--radius) * 2 + var(--stroke-width));
  animation: rotate var(--duration) linear infinite;
}

.spinner > circle {
  fill: transparent;
  stroke-linecap: round;
  stroke-width: var(--stroke-width);
  stroke-dasharray: var(--offset);
  stroke-dashoffset: var(--offset);
  animation: dash var(--duration) ease-in-out infinite, 
    colors calc(var(--duration)*4) ease-in-out infinite;
}

@keyframes colors {
  0% { stroke: #3b82f6; }
  25% { stroke: #ef4444; }
  50% { stroke: #eab308; }
  75% { stroke: #22c55e; }
  100% { stroke: #3b82f6; }
}

@keyframes dash {
 0% { stroke-dashoffset: var(--offset); }
 50% { stroke-dashoffset: 0; }
 100% { stroke-dashoffset: calc(var(--offset) * -1); }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}