Spinner / Loader
<svg> / <div>
Visual feedback that an operation is in progress. Always pair with accessible text.
Overview
Preview
Basic spinner
Preview
html
<svg class="h-6 w-6 animate-spin text-[#D40C37]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<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" />
</svg>Sizes
html
<svg class="h-4 w-4 animate-spin text-[#D40C37] ...">...</svg> <!-- sm -->
<svg class="h-6 w-6 animate-spin text-[#D40C37] ...">...</svg> <!-- md -->
<svg class="h-8 w-8 animate-spin text-[#D40C37] ...">...</svg> <!-- lg -->
<svg class="h-12 w-12 animate-spin text-[#D40C37] ...">...</svg> <!-- xl -->Button loading state
Preview
html
<button disabled class="inline-flex items-center gap-2 rounded-md bg-[#D40C37] px-4 py-2 text-sm font-medium text-white opacity-80 cursor-wait">
<svg class="h-4 w-4 animate-spin" ...>...</svg>
Saving...
</button>Dots loader
Preview
html
<div class="flex items-center gap-1">
<span class="h-2 w-2 rounded-full bg-[#D40C37] animate-bounce" style="animation-delay: 0ms" />
<span class="h-2 w-2 rounded-full bg-[#D40C37] animate-bounce" style="animation-delay: 150ms" />
<span class="h-2 w-2 rounded-full bg-[#D40C37] animate-bounce" style="animation-delay: 300ms" />
</div>Full-page overlay
html
<div class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/80 backdrop-blur-sm">
<div class="flex flex-col items-center gap-4">
<svg class="h-10 w-10 animate-spin text-[#D40C37]" ...>...</svg>
<p class="text-sm text-zinc-400">Loading your workspace...</p>
</div>
</div>Accessibility notes
- Wrap spinners in a
<div role="status" aria-label="Loading">so screen readers announce the state - When loading completes, use
aria-live="polite"on the result container to announce content - Never remove the spinner from the DOM without also updating the page content