JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="-2 -2 204 204">
  <g fill="none" stroke-width="2" transform="translate(100,100)">
    <path d="M 0,-100 A 100,100 0 1 0 0,100" stroke="#44c4fa" />
    <path d="M 0,100 A 100,100 1 0 0 100,0" stroke="url(#gradient)" />
  </g>
</svg>
<svg width="0" height="0">
  <defs>
    <linearGradient id="gradient" x1="0" y1="1" x2="1" y2="0">
      <stop stop-color="#44c4fa" />
      <stop offset="100%" stop-color="#44c4fa" stop-opacity="0" />
    </linearGradient>
  </defs>
</svg>

CSS

g {
  animation: loading linear 2s infinite;
}

@keyframes loading {
  from {
    transform: translate(100px,100px) rotate(0deg);
  }
  to {
    transform: translate(100px,100px) rotate(360deg);
  }
}