Spinner

Spinner

Component preview

A compact animated indicator for work whose completion amount is unknown, paired with a meaningful busy status.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: loading spinner, activity indicator, busy indicator

a spinning mark while something loads
show that the button is still working
an unknown wait with no percentage
a small loader beside the status text
indicate background work in progress
a busy symbol when duration is uncertain

Try it

Wait and track progress

Compare all three behaviors

Shared comparison scenario: A workspace waits for content or an operation to finish and communicates only the progress it can measure honestly.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Spinner

Spinner communicates an indeterminate wait; Progress bar shows measurable completion, while Skeleton previews the shape of content still loading.

Your task

Start saving, verify duplicate activation is blocked, enable reduced motion, and wait for the final status.

Edge case to verify

After a long threshold, the interface adds explanatory text and a cancel or retry path instead of spinning forever.

Mission

Start saving, verify duplicate activation is blocked, enable reduced motion, and wait for the final status.

Primary state: The button exposes Saving, prevents a duplicate request, and shows a redundant animated indicator.

The document is ready to save.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Status icon

A redundant visual cue for the message type, never the only cue.

Use it when

A short operation has no meaningful completion value
A button must show that one request is pending

Avoid it when

A known percentage can be reported
The wait is long enough to require progress detail or cancellation

Compare similar concepts

Progress bar requires a meaningful measurable value; Spinner is for unknown completion, while Skeleton represents the eventual content layout.

Progress bar

Skeleton previews content shape; Spinner communicates unknown work compactly, while Progress bar reports measurable completion.

Skeleton

Technical details

Behaviors

Mark the region busy
The content region exposes its busy state while a separate visual indicator remains redundant.
Announce meaningful changes
A live region announces new status only when the update is important and not already focused.

States

Task idle
Task idle
Task loading
Task loading
Task taking longer than expected
Task taking longer than expected
Task cancelled
Task cancelled
Task done
Task done

State transitions

Task idle → Task loading
An operation with unknown remaining duration starts and marks its region busy.
Task loading → Task taking longer than expected
After the long-wait threshold, explanatory text and a Cancel action appear while saving continues.
Task taking longer than expected → Task done
The save finishes, removes the spinner, and exposes the final Saved status with no further activation.
Task taking longer than expected → Task cancelled
Activating Cancel stops the pending save and exposes Retry without losing the document.
Task cancelled → Task loading
Activating Retry starts one new save and hides the prior cancellation status.
Task done → Task idle
Reset restores the replayable save example to its initial ready state.

Test scenarios

Context: A Save button sends a short request with unknown server duration.
Mission: Start saving, verify duplicate activation is blocked, enable reduced motion, and wait for the final status.
Primary state: The button exposes Saving, prevents a duplicate request, and shows a redundant animated indicator.
Edge case: After a long threshold, the interface adds explanatory text and a cancel or retry path instead of spinning forever.

Accessibility

Role: status text with aria-busy on the updated region
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Focus remains on the initiating control unless a documented transition replaces the whole view.
Dismissal: The indicator ends when work resolves or is cancelled; it is never a manually dismissible message by itself.
Scroll: Loading and replacement content reserve enough space to prevent layout jumps and preserve the user's scroll position.
Announcement: A concise status announces the start and final result, while the spinner graphic remains hidden from assistive technology.
Keyboard: Tab reaches the initiating control
The pending control blocks duplicate activation
Cancel remains keyboard reachable when offered

Bindings

status text plus decorative indicator
implementationKind
custom
nativeElement
status text plus decorative indicator
ariaPattern
status and aria-busy on the updated region
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
exception
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: The animated mark is visual only. The busy region and a meaningful textual status carry the accessible state.
Verify binding source

Sources

WAI-ARIA 1.2: aria-busy
W3C WAI · standard · 2026-07-16
Claim covered: Spinner: normative aria-busy state used to expose an updating region without announcing incomplete content.
WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Claim covered: Spinner: WCAG status-message requirements used to qualify non-focus-moving announcements.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.