JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewbox="0 0 100 100" id="svg">
  <defs>
    <linearGradient id="gradient">
      <stop offset="26%" stop-color="#632ef4" />
      <stop offset="100%" stop-color="#12ead5" />a
    </linearGradient>
  </defs>
  <path class="rotate" id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
  </path>
</svg>

CSS

#svg {
  animation-name: turn;
  transform-origin: 50px 50px;
  animation: turn 2s infinite;
  width: 100px;
  height: 100px;
}

@keyframes turn {
  100% {
    transform: rotate(1080deg);
  }
}