Tailwind CSS Spinners

A spinner for displaying loading state of a page or a component.

Basic Example

A simple loading status.

Loading... 
<div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-green-600 rounded-full" role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div>

Colors

Predefined spinner color styles.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading... 
<div class="animate-spin inline-block w-6 h-6 border-[3px] border-gray-200 border-current border-t-transparent text-green-600 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-gray-800 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-gray-400 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-red-600 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-yellow-500 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-blue-600 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-indigo-600 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-purple-600 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-pink-600 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-orange-600 rounded-full" role="status" aria-label="loading">
    <span class="sr-only">Loading...</span>
 </div>

Sizes

A small size is good for loading text, default sized spin for loading a card-level block, and large spin used for loading a page.

Loading...
Loading...
Loading... 
<div class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-green-600 rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-green-600 rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
 </div>
 <div class="animate-spin inline-block w-8 h-8 border-[3px] border-current border-t-transparent text-green-600 rounded-full" role="status" aria-label="loading">
  <span class="sr-only">Loading...</span>
 </div>