JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="711.1px" height="717.1px" viewBox="0 0 711.1 717.1" enable-background="new 0 0 711.1 717.1" xml:space="preserve">
	 
	 
<circle class="circle" fill="none" stroke="#FD4F00" stroke-width="66" stroke-miterlimit="10" cx="355.55" cy="358.55" r="285.956"/>
<circle class="circle1" fill="none" stroke="#FD4F00" stroke-width="3.0819" stroke-miterlimit="10" cx="355.55" cy="358.55" r="233.497"/>
<circle class="circle2" fill="none" stroke="#FD4F00" stroke-width="2.8006" stroke-miterlimit="10" cx="355.55" cy="358.55" r="212.186"/>
<circle class="circle3" fill="none" stroke="#FD4F00" stroke-width="2.5572" stroke-miterlimit="10" cx="355.55" cy="358.55" r="193.744"/>
</svg>

CSS

.circle {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 5s linear alternate 3 forwards;
   -webkit-transform-origin: 50% 50% ;
    -webkit-transform: rotate(-90deg) ;
}
.circle1 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 5s linear alternate 3 forwards;
   -webkit-transform-origin: 50% 50% ;
    -webkit-transform: rotate(-90deg) ;
}
.circle2 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 5s linear alternate 3 forwards;
   -webkit-transform-origin: 50% 50% ;
    -webkit-transform: rotate(-90deg) ;
}
.circle3 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 5s linear alternate 3 forwards;
   -webkit-transform-origin: 50% 50% ;
    -webkit-transform: rotate(-90deg) ;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}