JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<svg width="500" height="500">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>
  <circle cx="250" cy="250" r="200" stroke="grey" stroke-width="50" fill="transparent"/>
  <circle id="path" cx="250" cy="250" r="200" stroke="url(#linear)" stroke-linecap="round" stroke-width="50" fill="transparent" transform="rotate(-90 250,250)">
  
</svg>

CSS

#path {
  stroke-dasharray: 1256;
  stroke-dashoffset: 1256;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 10;
  }
}