Loader
Shows that something is loading.
Installation
pnpm dlx shadcn@latest add @paneui/loaderUsage
Examples
Accessibility
Renders role="status" with aria-label from label (default "Loading").
Motion
Loops are CSS keyframes shipped with the component, so they don't stall on a busy page or restart on re-render. With reduced motion every variant swaps movement, rotation and scale for a soft opacity fade and drops the extra pulse and ripple rings; spinner is opacity-only already.
Loader
Loading indicator in eight styles. Also accepts every prop of span.
- variant= "spinner"
- "spinner" | "ring" | "dots" | "bars" | "pulse" | "ripple" | "orbit" | "typing"
- Animation style.
- size= "md"
- "xs" | "sm" | "md" | "default" | "lg"
- 12, 16, 24 or 32px;
defaultis the same asmd. - speed= 1
- number
- Multiplier on animation speed; 2 is twice as fast.
- label= "Loading"
- string
- Announced to screen readers.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "spinner" | "ring" | "dots" | "bars" | "pulse" | "ripple" | "orbit" | "typing" | "spinner" | Animation style. |
| size | "xs" | "sm" | "md" | "default" | "lg" | "md" | 12, 16, 24 or 32px; default is the same as md. |
| speed | number | 1 | Multiplier on animation speed; 2 is twice as fast. |
| label | string | "Loading" | Announced to screen readers. |
- data-variant
- The
variantvalue. - data-size
- The
sizevalue.
| Data attribute | Description |
|---|---|
| data-variant | The variant value. |
| data-size | The size value. |