Spinner

Displays ongoing activity or loading state when content or actions are in progress.

Code

Installation

npx shadcn@latest add spinner

Basic Example

import { Spinner } from "@/components/ui/spinner"

<Spinner />
<Spinner size="lg" />
<Spinner variant="success" />

Reference

Props

Prop	Type	Default	Description
size	string	"default"	Size variant. Options: xs, sm, default, lg, xl, 2xl
variant	string	"default"	Color variant. Options: default, secondary, muted, destructive, success, inverted
label	string	"Loading..."	Accessibility label for screen readers

Sizes

Default

2XL

Variants

Default

Secondary

Muted

Success

Destructive

Inverted

Usage Guidelines

When to Use

Use spinners to indicate loading states for async operations, data fetching, form submissions, and other processes that take time to complete. They provide clear visual feedback that something is happening.

Choose spinner size based on context: small for buttons and inline content, medium for cards and sections, large for full-page loading states.

Best Practices

Show spinners for operations longer than 200ms
Use appropriate size for the context
Match spinner color to the action or component
Provide text labels for clarity
Don't use spinners for very short operations

Accessibility

Spinners automatically include proper ARIA attributes (role="status" and aria-label) for screen readers. Provide descriptive labels when the loading context isn't clear from surrounding content.

Ensure spinners have sufficient color contrast. Consider using a variant that matches the background for better visibility.

Rhetoric-ds