JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="60.000000pt" height="60.000000pt" viewBox="0 0 60.000000 60.000000"
 preserveAspectRatio="xMidYMid meet">
<circle cx="30" cy="30" r="22" fill="none" stroke="#ff9e02" stroke-width="5px" stroke-dasharray="232%" stroke-dashoffset="232%" transform="rotate(-90)" style="transform-origin: 50% 50%">
  <!--<animate id="p1" attributeName="stroke-dashoffset" begin="0s;p1.end" values="232%; 0" dur="3s"  calcMode="paced"/>-->
</circle>
</svg>

CSS

circle {
  stroke-dasharray: 232%;
  animation: animateMe linear 3s infinite;
}

@keyframes animateMe {
 0% { stroke-dashoffset: 232%; }
 100% { stroke-dashoffset: 0; }
}