Loading indicator as a ring, dots or equaliser bars in five sizes; it announces itself as a status and slows to a pulse for reduced motion.
loadingspinnerprogressstatusloader
Installation
$npx shadcn@latest add @geturui/spinner
Usage
usage.tsx
1import { Spinner } from "@/components/ui/spinner";
2
3export function Saving() {
4 return <Spinner text="Saving changes…" />;
5}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | 12, 16, 24, 32 or 48px. |
variant | "ring" | "dots" | "bars" | "ring" | Shape of the indicator. |
label | string | null | "Loading" | Screen reader text. Pass null inside something that already announces, like a busy button. |
text | ReactNode | — | Visible text beside the spinner. |
stacked | boolean | false | Put the text under the spinner. |
Accessibility
- role="status" with an accessible name, so screen readers announce it politely.
- Colour follows currentColor; the glyph itself is aria-hidden.
- Rotation and bouncing become a slow opacity pulse under prefers-reduced-motion.