JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spinner spinner-spiral">
<svg viewBox="0 0 64 64">
  <g>
    <defs>
      <linearGradient id="sGD" gradientUnits="userSpaceOnUse" x1="55" y1="46" x2="2" y2="46">
        <stop offset="0.1" class="stop1"></stop>
        <stop offset="1" class="stop2"></stop>
      </linearGradient>
    </defs>
    <g stroke-width="4" stroke-linecap="round" fill="none" transform="rotate(240.659 32 32)">
      <path stroke="url(#sGD)" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9"></path><path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32"></path>
    </g>
<!--     <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms"></animateTransform> -->
  </g>
</svg>
</div>

CSS

.spinner {
  stroke: #444;
  fill: #444; }
  .spinner svg {
    width: 128px;
    height: 128px; }


.spinner-spiral .stop1 {
  stop-color: #fff;
  stop-opacity: 0; }

body {background: #bed;}

JavaScript

// @see: https://codepen.io/ionic/pen/GgwVON