Shadcn Spinner
The shadcn/ui Spinner is an animated loading indicator for indeterminate waits, styled with Tailwind CSS v4. Show it on its own or inside a button during an async action. Spinners signal progress across ShadcnStore forms and app blocks.
Key features
- Simple indeterminate loading indicator.
- Sizes and colors set with Tailwind utilities.
- Works standalone or inside a Button.
- Respects text and icon sizing.
- Themed for light and dark.
Installation
npx shadcn@latest add spinnerUsage
import { Spinner } from "@/components/ui/spinner"
import { Button } from "@/components/ui/button"
export function Example() {
return (
<Button disabled>
<Spinner />
Please wait
</Button>
)
}Accessibility
- Give the loading region an accessible name (for example
aria-label="Loading"). - Keep the button label visible while loading so the action stays clear.
- For long waits with known progress, use a Progress bar instead.
When to use the Spinner
Use a Spinner for short, indeterminate waits: a submitting button, a small inline load, or a brief fetch. For content whose shape is known, use a Skeleton. For a known percentage, use a Progress bar.
Used in these blocks
- Login forms: sign-in progress.
- Checkout forms: payment progress.
- Apps: inline loading.
Related components
A Spinner often sits inside a Button or a Marker status line; for content placeholders use a Skeleton, for determinate loading a Progress bar, and for no-data an Empty state.
FAQ
What is the shadcn spinner used for?
The Spinner is an animated loading indicator for indeterminate waits, shown on its own or inside a button during an async action.
What is the difference between Spinner and Skeleton?
A Spinner is a small indeterminate indicator for short waits. A Skeleton mirrors the shape of content while it loads.
How do I put a spinner in a button?
Render the Spinner inside a disabled Button next to the label while an action is pending.
How do I change the spinner size?
Apply a size utility such as size-6 to the Spinner.