Status & loading

Spinner / Activity Indicator

Q: How do people describe a Spinner / Activity Indicator in plain words?

the little spinning circle while something loads that loading wheel that means 'wait a second' the rotating icon on a button after I click Save

Q: How do I implement a Spinner / Activity Indicator?

Show an inline spinner on the primary button while the request is in flight: disable the button, keep its width stable, use a 16–20px spinning icon, and restore the label when done.

A compact motion indicator that something is busy—usually circular or system-native.

Also known as loading spinner · activity indicator · busy indicator

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Spinner / Activity Indicator".

Show an inline spinner on the primary button while the request is in flight: disable the button, keep its width stable, use a 16–20px spinning icon, and restore the label when done.

Anatomy:
- indicator: Circular stroke or system glyph; keep size tied to context (inline vs page).
- label: Optional 'Loading…' text for long waits; hide decorative spinners from SR noise.

Preferred API / pattern: `lucide Loader2 animate-spin / shadcn patterns`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Spinner with no accessible busy state
○Avoid: Page-level spinner for known card layout
○Avoid: Spinner never stops if the request hangs

In plain wordsHow people search for it

“the little spinning circle while something loads”“that loading wheel that means 'wait a second'”“the rotating icon on a button after I click Save”

AnatomyOpen for part names

indicator: Circular stroke or system glyph; keep size tied to context (inline vs page).
label: Optional 'Loading…' text for long waits; hide decorative spinners from SR noise.

How to write itOpen for stack patterns

Web (HTML/CSS)CSS animate-spin / aria-busy

React + Tailwind + shadcn/uilucide Loader2 animate-spin / shadcn patterns

SwiftUIProgressView()

Ant Design<Spin> / <Spin spinning>

Notes

Spinners answer 'is it working?' not 'how far?'. Use determinate progress when you know percent. Inline spinners on buttons should disable double-submit. Full-page spinners block understanding of structure—prefer skeletons for first load of known layouts.

Help me choose: Skeleton vs Spinner →

Common mistakesHumans and models trip here

Spinner with no accessible busy state: set aria-busy on the region or button.
Page-level spinner for known card layout: use a skeleton instead.
Spinner never stops if the request hangs: add timeout and error recovery.

More failure symptoms on AI broke it.

Related patterns

Skeleton ScreenPlaceholder shapes that mirror upcoming content so loading feels structured, not empty.Progress Bar / IndicatorA determinate (or sometimes indeterminate) bar showing how far a task has gone.Toast / SnackbarA brief, non-blocking status bar that appears after an action and dismisses itself.

Spotted a wrong name or missing pattern?

Message on X