Back to application components
Loaders
Loading and progress indicator components for web applications. Includes spinners, progress bars, and animated loaders for data fetching states in dashboards, forms, and content-heavy applications.
Updated: Jul 4, 2026
<div role="status" aria-label="Loading">
<svg
class="mx-auto size-8 animate-spin text-indigo-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>Circular spinning loader for general loading states
<div class="text-center" role="status">
<svg
class="mx-auto size-8 animate-spin text-indigo-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
<p class="mt-4 font-medium text-gray-700">Loading...</p>
</div>Centered spinner with loading message displayed below
<div class="inline-flex items-center gap-3" role="status">
<svg
class="size-6 animate-spin text-indigo-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
<p class="font-medium text-gray-700">Loading...</p>
</div>Compact spinner with text aligned horizontally
<div class="w-full max-w-sm" role="status">
<div class="h-2 overflow-hidden rounded-full bg-gray-200">
<div class="h-full w-[80%] animate-pulse bg-indigo-600"></div>
</div>
<p class="mt-4 text-center font-medium text-gray-700">Loading...</p>
</div>Horizontal bar indicator showing loading progress
<div class="flex gap-2" role="status" aria-label="Loading">
<span class="size-3 animate-pulse rounded-full bg-indigo-600" aria-hidden="true"></span>
<span
class="size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.2s]"
aria-hidden="true"
></span>
<span
class="size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.4s]"
aria-hidden="true"
></span>
</div>Three animated dots with sequential pulse effect
<div class="flex gap-2" role="status" aria-label="Loading">
<span class="size-3 animate-ping rounded-full bg-indigo-600" aria-hidden="true"></span>
<span
class="size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.2s]"
aria-hidden="true"
></span>
<span
class="size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.4s]"
aria-hidden="true"
></span>
</div>Three animated dots with expanding ping effect
<div class="flex gap-2" role="status" aria-label="Loading">
<span class="size-3 animate-bounce rounded-full bg-indigo-600" aria-hidden="true"></span>
<span
class="size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.2s]"
aria-hidden="true"
></span>
<span
class="size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.4s]"
aria-hidden="true"
></span>
</div>Three animated dots with bouncing effect