Spinner
Loading indicator for async operations, in sm, md, and lg sizes.
Installation
npx paubha@latest add spinnerUsage
import { Spinner } from "@/components/ui/spinner";
{isLoading ? <Spinner /> : <Content />}A light track ring plus a highlighted arc, rotating as a whole via
animate-spin. The arc uses currentColor and defaults to text-fg-brand;
pass a different text-* class (or className) to recolor it, no prop
needed. Button has its own separate internal loading spinner sized to its
icon slots, not this component reused: two independent implementations of
the same idea, not the same thing built twice.
Examples
Sizes
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Diameter: 16 / 24 / 32px. |
Accessibility
Accessibility
Role. Renders as a native
<output>, whose implicit role isstatus.Accessible name.
aria-label="Loading", announced viaaria-live="polite".Busy state. Spinner doesn't set
aria-busyitself. Addaria-busy="true"to whichever element is actually loading (a section, a button, a form).Unmounting. Spinner has no "done" state of its own. Swap it out for real content (or an empty state) once loading finishes.