Spinners

<div class="border-t-transparent border-solid animate-spin  rounded-full border-primary-500 border-4 h-8 w-8 inline-block"></div>
<div class="border-t-transparent border-solid animate-spin  rounded-full border-red-500 border-4 h-8 w-8 inline-block"></div>
<div class="border-t-transparent border-solid animate-spin  rounded-full border-yellow-500 border-4 h-8 w-8 inline-block"></div>
<div class="border-t-transparent border-solid animate-spin  rounded-full border-orange-400 border-4 h-8 w-8 inline-block"></div>
<div class="border-t-transparent border-solid animate-spin  rounded-full border-cyan-500 border-4 h-8 w-8 inline-block"></div>
<div class="border-t-transparent border-solid animate-spin  rounded-full border-green-500 border-4 h-8 w-8 inline-block"></div>

<span><i class="fas fa-circle-notch animate-spin text-primary-500  text-4xl"></i></span>                                
<span><i class="fas fa-circle-notch animate-spin text-red-500  text-4xl"></i></span>
<span><i class="fas fa-circle-notch animate-spin text-yellow-500  text-4xl"></i></span>
<span><i class="fas fa-circle-notch animate-spin text-orange-400  text-4xl"></i></span>
<span><i class="fas fa-circle-notch animate-spin text-cyan-500  text-4xl"></i></span>
<span><i class="fas fa-circle-notch animate-spin text-green-500  text-4xl"></i></span>

                                       
<div class="relative inline-block self-center">
    <div class="w-16 h-16 border-primary-200 border-2 rounded-full"></div>
    <div class="w-16 h-16 border-primary-700 border-t-2 animate-spin rounded-full absolute left-0 top-0"></div>
</div> 
<div class="relative inline-block self-center">
    <div class="w-10 h-10 border-primary-200 border-2 rounded-full"></div>
    <div class="w-10 h-10 border-primary-700 border-t-2 animate-spin rounded-full absolute left-0 top-0"></div>
</div>
<div class="relative inline-block self-center">
    <div class="w-6 h-6 border-primary-200 border-2 rounded-full"></div>
    <div class="w-6 h-6 border-primary-700 border-t-2 animate-spin rounded-full absolute left-0 top-0"></div>
</div> 

<div class="inline-block">
    <div class="animate-spin rounded-full h-20 w-20 border-t-2 border-b-2 border-primary-500"></div>
</div>
<div class="inline-block">
    <div class="relative w-24 h-24 animate-spin rounded-full bg-gradient-to-r from-purple-400 via-blue-500 to-red-400 ">
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 bg-white dark:bg-slate-700 rounded-full border-2 border-white"></div>
    </div>
</div>