Components
A spinner for displaying loading state of a page or a component.
A simple loading status.
<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>
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 dark:text-white" 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>
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-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-blue-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-blue-600 rounded-full" role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
Spin in a card.
<div class="min-h-[15rem] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
<div class="flex justify-center">
<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>
</div>
</div>
Customized description content.
<div class="relative">
<div class="bg-blue-50 border border-blue-200 rounded-md p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-4 w-4 text-blue-400 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm text-blue-800 font-medium">
Attention needed
</h3>
<div class="text-sm text-blue-700 mt-2">
<span class="font-semibold">Holy guacamole!</span> You should check in on some of those fields below.
</div>
</div>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-full bg-white/[.5] rounded-md dark:bg-gray-800/[.4]"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<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>
</div>