JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="-2 -2 204 204">
  <g>
    <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)" />
      <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>
    </g>
    <animateTransform attributeName="transform" type="translate" from="100 100" to="100 100" begin="0s" dur="5s" repeatCount="indefinite"></animateTransform>
  </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>