Spinner
shadcn/ui
Animated loading indicator. No size prop — use size-* class. Color inherits from text-*.
@/components/ui/spinnerSizes
| Class | px | Preview | Usage |
|---|---|---|---|
| size-3 | 12px | Inline text, dense table cells | |
| size-4 | 16px | Buttons, toolbar actions — most common | |
| size-5 | 20px | Input suffixes, compact panels | |
| size-6 | 24px | Card loaders, side panels | |
| size-8 | 32px | Page-level loaders, full-screen overlays |
Color via text-*
| Class | Preview | When to use |
|---|---|---|
| (none — inherits) | Default — picks up current text color | |
| text-muted-foreground | Subtle loaders, secondary panels | |
| text-primary | Primary action in progress | |
| text-destructive | Deletion or error context |
In context — loading patterns
Buttons
Panel loader
Loading tickets...
Inline (in text)
Syncing with external system...
Spinner vs Skeleton
| Spinner | Skeleton | |
|---|---|---|
| Use when | Action in progress (save, delete, submit) | Content is loading (initial fetch, page navigation) |
| Duration | Short and unpredictable (under 3s) | Long or predictable (network fetch, images) |
| Placement | Inside buttons, centered in panel, inline text | Replaces the content it represents — same shape |
| Perception | "Something is happening" | "Content will appear here" |
On this page