JSFiddle - React, Tailwind, and code Playground

by CreativeDreams

HTML

<section>
<div>


<svg class="ct-button-loader" width="24" height="24" viewBox="0 0 40 40">
	<path opacity=".2" fill="currentColor" d="M20.201 5.169c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-.001-8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634 6.425 0 11.633 5.209 11.633 11.634 0 6.426-5.208 11.634-11.633 11.634z"/>

	<path fill="currentColor" d="m26.013 10.047 1.654-2.866a14.855 14.855 0 0 0-7.466-2.012v3.312c2.119 0 4.1.576 5.812 1.566z">
		<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="2s" repeatCount="indefinite"/>
	</path>
</svg>

</div>

<div>
<svg width="18" height="18"  viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10" opacity="0.2" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2.5"/>
    
    <path d="m12,2c5.52,0,10,4.48,10,10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="2s" 
         from="0 12 12"
         to="360 12 12" 
         repeatCount="indefinite" />
  </path>
</svg>
</div>

<div>
<svg width="24" height="24"  viewBox="0 0 12 12">
    <path opacity=".2" fill="currentColor" d="M6,1c2.8,0,5,2.2,5,5s-2.2,5-5,5S1,8.8,1,6S3.2,1,6,1 M6,0C2.7,0,0,2.7,0,6s2.7,6,6,6s6-2.7,6-6S9.3,0,6,0L6,0z"/>
    
    <path fill="currentColor" d="M6,0C3.9,0,2.1,1,1.1,2.6l0.8,0.6C2.8,1.9,4.3,1,6,1s3.2,0.9,4.1,2.2l0.8-0.6C9.9,1,8.1,0,6,0z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="2s" 
         from="0 6 6"
         to="360 6 6" 
         repeatCount="indefinite" />
  </path>
</svg>
</div>

</section>

SCSS

section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  scale: 7;
  padding-top: 50px;
  
  div {
    display: flex;
    background: #eee;
  }
}