Spinners

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

Basic Example

A simple loading status.

<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>

Color variants

Predefined spinner color styles.

<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-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-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.

<div
		class="animate-spin inline-block w-4 h-4 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-indigo-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-indigo-600 rounded-full "
		role="status"
		aria-label="loading"
		>
		<span class="sr-only">Loading...</span>
 </div>