JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rotor">
    <svg class="circle" width="140" height="140">
         <circle r="65" cx="70" cy="70"/>
    </svg>
</div>

CSS

.circle{
    fill: white;
    stroke: crimson; 
    stroke-width: 3;
    stroke-dasharray: 408 0;
    animation: dasharray 2s linear normal infinite;
}

@keyframes dasharray {
  50% {
    stroke-dasharray: 0 408;
      transform: rotate(0deg);
     
  }
    100%{     
        stroke-dasharray: 408 0;
       transform: rotate(-360deg);
    }
}

.rotor{
    height: 140px;
    width: 140px;    
    animation: rotor 1.5s linear normal infinite;
}

@keyframes rotor { 
    100%{             
       transform: rotate(-360deg);
    }
}