Loading States

<div class="animate-spin w-8 h-8" viewBox="0 0 24 24">
    <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 512 512" id="loader"><path fill="#a5b4fc" d="M256.11 105.89a47.44 47.44 0 1 0-47.44-47.44 47.5 47.5 0 0 0 47.44 47.44Z"></path><path fill="#c7d2fe" d="M116.39 163.65a47.42 47.42 0 0 0 33.55-81 47.44 47.44 0 1 0-33.55 81Z"></path><path fill="#312e81" d="M105.89 255.89a47.44 47.44 0 1 0-47.44 47.44 47.5 47.5 0 0 0 47.44-47.44Z"></path><path fill="#3730a3" d="M82.68 362.07a47.44 47.44 0 1 0 67.09 0 47.5 47.5 0 0 0-67.09 0Z"></path><path fill="#4338ca" d="M255.89 406.11a47.44 47.44 0 1 0 47.44 47.44 47.5 47.5 0 0 0-47.44-47.44Z"></path><path fill="#4f46e5" d="M362.07 362.23a47.5 47.5 0 0 0 0 67.09 47.44 47.44 0 1 0 0-67.09Z"></path><path fill="#6366f1" d="M453.56 208.67A47.44 47.44 0 1 0 501 256.11a47.5 47.5 0 0 0-47.44-47.44Z"></path><path fill="#818cf8" d="M395.77 163.81a47.3 47.3 0 0 0 33.55-13.87 47.5 47.5 0 1 0-33.55 13.87Z"></path></svg>
</div>

<div class="animate-spin w-8 h-8">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="loader"><g data-name="Layer 2"><path d="M12 2a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0V3a1 1 0 0 0-1-1zm9 9h-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2zM6 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1zm.22-7a1 1 0 0 0-1.39 1.47l1.44 1.39a1 1 0 0 0 .73.28 1 1 0 0 0 .72-.31 1 1 0 0 0 0-1.41zM17 8.14a1 1 0 0 0 .69-.28l1.44-1.39A1 1 0 0 0 17.78 5l-1.44 1.42a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.31zM12 18a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-1-1zm5.73-1.86a1 1 0 0 0-1.39 1.44L17.78 19a1 1 0 0 0 .69.28 1 1 0 0 0 .72-.3 1 1 0 0 0 0-1.42zm-11.46 0-1.44 1.39a1 1 0 0 0 0 1.42 1 1 0 0 0 .72.3 1 1 0 0 0 .67-.25l1.44-1.39a1 1 0 0 0-1.39-1.44z" data-name="loader"></path></g></svg>
</div>

<div class="animate-spin w-8 h-8">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" id="loading"><path fill="#88e2de" d="M50.287 32A18.287 18.287 0 1 1 32 13.713a1.5 1.5 0 1 1 0 3A15.287 15.287 0 1 0 47.287 32a1.5 1.5 0 0 1 3 0Z" data-name="Loading"></path></svg>
</div>

<div class="animate-spin w-8 h-8">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.36 48.94" id="refresh"><g data-name="Layer 2"><g data-name="Layer 1"><path fill="#555" d="M22.67 0A24.24 24.24 0 0 0 0 15.54l3.76 1.53a20.19 20.19 0 0 1 35.08-4.84h-8v4.05h14.24V2H41v6.33A24.34 24.34 0 0 0 22.67 0Z"></path><path fill="#0379d4" d="M41.58 31.84a20.18 20.18 0 0 1-18.91 13 20.41 20.41 0 0 1-16.21-8.16h8.1v-4H.3V46.9h4.05v-6.31a24.32 24.32 0 0 0 41-7.19l-3.75-1.53Z"></path></g></g></svg>
</div>