Spinners
Spinners.
Make use of Tailwind's unique Spinners styles to provide visual feedback for ongoing processes, ensuring users are aware of background activities.
SpinnersSpinners
Default Spinner
<div class="spinner-border" role="status">
<span class="spinner size-8 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent inline-block"></span>
</div>
Growing Spinner
<div class="relative size-7">
<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
Custom Spinners
<div class="inline-block relative size-8 mr-4">
<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-[6px] [animation-delay:-0.1s] opacity-80"></div>
<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-[6px] [animation-delay:-0.2s] opacity-60"></div>
<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-[6px] [animation-delay:-0.3s] opacity-40"></div>
<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-[6px] [animation-delay:-0.4s] opacity-20"></div>
<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-[6px]"></div>
</div>
<div class="spinner relative size-8 rounded-full inline-block">
<div class="absolute border-4 border-primary border-l-transparent border-b-0 size-full rounded-full animate-spin [animation-direction:reverse]"></div>
<div class="absolute border-4 border-primary border-r-0 border-t-transparent size-5 rounded-full top-[calc(50%_-_10px)] left-[calc(50%_-_10px)] animate-spin"></div>
</div>
Colorfull Spinners
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-primary border-r-transparent inline-block" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-secondary border-r-transparent inline-block" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-success border-r-transparent inline-block" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-danger border-r-transparent inline-block" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-warning border-r-transparent inline-block" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-info border-r-transparent inline-block" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-light border-r-transparent inline-block" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-secondary border-r-transparent inline-block" role="status">
<span class="visually-hidden"></span>
</div>
Colorfull Growing Spinners
<div class="relative size-7 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-primary opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-primary opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-secondary opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-secondary opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-success opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-success opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-danger opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-danger opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-warning opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-warning opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-info opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-info opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-light opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-light opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-secondary opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-secondary opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
Alighment Flex
Loading...
<div class="flex justify-center">
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent inline-block" role="status">
<span class="visually-hidden"></span>
</div>
</div>
<div class="flex items-center">
<strong role="status">Loading...</strong>
<div class="spinner size-8 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent inline-block ml-auto"></div>
</div>
Spinner Sizes
<div class="spinner size-4 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent inline-block mr-6" role="status">
<span class="visually-hidden"></span>
</div>
<div class="relative size-4 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<div class="spinner size-12 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent inline-block mr-6" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden"></span>
</div>
<div class="relative size-12 inline-block mr-2">
<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
Buttons Spinner
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white mb-2 me-2 opacity-65 pointer-events-none">
<span class="spinner size-4 animate-spin rounded-full border-[3px] border-white border-r-transparent inline-block"></span>
<span class="visually-hidden" role="status"></span>
</button>
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white mb-2 me-2 opacity-65 pointer-events-none">
<span class="spinner size-4 animate-spin rounded-full border-[3px] border-white border-r-transparent inline-block"></span>
<span role="status">Loading...</span>
</button>
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white mb-2 me-2 opacity-65 pointer-events-none">
<div class="relative size-4 inline-flex">
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<span class="visually-hidden" role="status"></span>
</button>
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white mb-2 me-2 opacity-65 pointer-events-none">
<div class="relative size-4 inline-flex">
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<span role="status">Loading...</span>
</button>
<button class="btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white mb-2 me-2 opacity-65 pointer-events-none">
<div class="relative size-4 inline-flex">
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<span role="status">Loading...</span>
</button>
<button class="btn bg-success hover:bg-successhover hover:shadow-btnsuccess text-white mb-2 me-2 opacity-65 pointer-events-none">
<div class="relative size-4 inline-flex">
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<span role="status">Loading...</span>
</button>
<button class="btn bg-danger hover:bg-dangerhover hover:shadow-btndanger text-white mb-2 me-2 opacity-65 pointer-events-none">
<div class="relative size-4 inline-flex">
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<span role="status">Loading...</span>
</button>
<button class="btn bg-warning hover:bg-warninghover hover:shadow-btnwarning text-white mb-2 me-2 opacity-65 pointer-events-none">
<div class="relative size-4 inline-flex">
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<span role="status">Loading...</span>
</button>
<button class="btn bg-info hover:bg-infohover hover:shadow-btninfo text-white mb-2 me-2 opacity-65 pointer-events-none">
<div class="relative size-4 inline-flex">
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<span role="status">Loading...</span>
</button>
<button class="btn bg-dark hover:bg-darkhover hover:shadow-btndark text-white mb-2 me-2 opacity-65 pointer-events-none">
<div class="relative size-4 inline-flex">
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:_-.75s] animate-spinnergrow"></span>
</div>
<span role="status">Loading...</span>
</button>