Spinner
A Spinner is an icon that rotates to show users that something is loading.
When to Use
- for a small part that waits on a task, such as a Badge that reads “Syncing” or an Item component that reads “Processing payment”
- as the icon of an Empty component while its content is loading, for example “Importing your clients”
When Not to Use
- to show loading in a Button (use a Loading Button)
- for a task whose progress can be measured (use the Progress component)
- for content whose layout is known before it loads (use a Skeleton)
A Loading Button delays the Spinner by 150ms and keeps the Button’s width and focus. See Progress for a comparison of the Spinner, the Progress component, and the Skeleton.
Sizes
By default, a Spinner is 16px and has the color of the text around it. To change its size, add a size-* class. In a Badge, the Spinner is always 12px.
Behavior
A Spinner rotates for as long as it is rendered. It has no delay, so render it when the wait starts and remove it when the wait ends.
Content
| String | Rule | Example | Counterexample |
|---|---|---|---|
| Text next to the Spinner | Name the task that is in progress | “Importing your clients” | “Please wait” |
The Spinner’s own name is labels.spinner.loading, which is “Loading” by default. To translate it, use the Summit Provider. To replace it on one Spinner, set aria-label.
Accessibility
A Spinner can’t receive focus and has no keys. It is an svg with role="status" and an aria-label, which is “Loading”.
If a Spinner rotates for more than 5 seconds next to content that users can use, it needs a way for users to pause, stop, or hide it, as WCAG 2.2 SC 2.2.2 Pause, Stop, Hide requires. A Spinner keeps rotating when users request reduced motion. See Accessibility for the exemption.
Installation
npx shadcn@latest add @summit/spinnerThe CLI also adds @summit/summit-provider.
Usage
import { Spinner } from '@/components/ui/spinner';
<Spinner />;In a Badge
To place a Spinner in a Badge, mark it with data-icon="inline-start", like any icon in a Badge.
import { Badge } from '@/components/ui/badge';
<Badge variant="secondary">
<Spinner data-icon="inline-start" />
Syncing
</Badge>;Size and Color
To change the size and the color, pass a size-* class and a text color in className.
<Spinner className="size-6 text-muted-foreground" />API Reference
Spinner adds no props. Its props are passed to the svg.