JSFiddle - React, Tailwind, and code Playground

by Hassan Pervaiz

HTML

<svg> 
		<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"
			 viewBox="0 0 177.667 177.667" style="enable-background:new 0 0 177.667 177.667;" xml:space="preserve"> 
		 
		<g id="circle-border">
			<path class="st0" d="M88.833,177.667C39.851,177.667,0,137.816,0,88.833S39.851,0,88.833,0c48.982,0,88.833,39.851,88.833,88.833
				S137.816,177.667,88.833,177.667z M88.833,1C40.402,1,1,40.402,1,88.833s39.402,87.833,87.833,87.833s87.833-39.402,87.833-87.833
				S137.265,1,88.833,1z"/>
		</g>
		<path id="small-nid" class="st1" d="M88.833,92.333c-1.933,0-3.5-1.567-3.5-3.5l0,0c0-1.933,1.567-3.5,3.5-3.5h35
			c1.933,0,7.313,3.5,9.5,3.5l0,0c0,1.933-7.567,3.5-9.5,3.5H88.833z"/>
		<path id="big-nid" class="st1" d="M92.333,88.833c0,1.933-1.567,3.5-3.5,3.5l0,0c-1.933,0-3.5-1.567-3.5-3.5v-61.75
			c0-1.933,3.5-7.531,3.5-9.5l0,0c1.933,0,3.5,7.567,3.5,9.5V88.833z"/>
		</svg>
	</svg>

CSS

.st0{fill:#55B948;}
.st1{fill:none;stroke:#55B948;stroke-miterlimit:10;}
path#small-nid {
  -webkit-animation: spin 4s infinite;
          animation: spin 4s infinite;
  -webkit-transform-origin: 89px 88px 0;
      -ms-transform-origin: 89px 88px 0;
          transform-origin: 89px 88px 0;
  -webkit-animation-timing-function: steps(8);
          animation-timing-function: steps(8);
}
path#big-nid {
  -webkit-animation: spin 1.5s infinite;
          animation: spin 1.5s infinite;
  -webkit-transform-origin: 89px 88px 0;
      -ms-transform-origin: 89px 88px 0;
          transform-origin: 89px 88px 0;
  -webkit-animation-timing-function: steps(12);
          animation-timing-function: steps(12);
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}