Behavior comparison
Skeleton vs Spinner
Decisive difference
Skeleton holds the future layout in place while content loads; Spinner is a compact indicator of unknown-length work with no layout hint.
Choice criteria, links and sources
- SkeletonChoose Skeleton if the loading region is large and its final shape is predictable, like a card or article.Open entry Skeleton
- SpinnerChoose Spinner if the wait is short or the region is small, such as inside a button.Open entry Spinner
See the nine dimensionsSee the sources
Wait and track progress
Try it
Is duration unknown, measurable, or should the content shape be preserved?
Skeleton
Shared trial context
A workspace waits for content or an operation to finish and communicates only the progress it can measure honestly.
Skeleton
Mission
Skeleton
Compare all three placeholder geometries with the loaded profiles, simulate one failed card, and retry it.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- Three decorative placeholders approximate the profile-card grid while the directory exposes its busy state.
- Edge case
- A failed card becomes a real textual error with Retry rather than remaining an endless skeleton.
Spinner
Mission
Spinner
Start saving, verify duplicate activation is blocked, read the busy status, and wait for the final status.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- 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.
What this example shows
Skeleton previews content shape; Spinner communicates unknown work compactly, while Progress bar reports measurable completion.
Which fits your need?
Skeleton
Loading a card or article layout whose shape is known
Spinner
A short operation has no meaningful completion value
Difference and sources
Skeleton previews content shape; Spinner communicates unknown work compactly, while Progress bar reports measurable completion.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Surface
The visible container that holds the concept's content.
Decision
Family question
Is duration unknown, measurable, or should the content shape be preserved?
Three criteria to choose
- Use case
Skeleton
Loading a card or article layout whose shape is known
Spinner
A short operation has no meaningful completion value
- Interactivity
Skeleton
Not interactive and not focusable; real controls replace it only when ready.
Spinner
Not interactive; an accessible status communicates that work is still in progress.
- Accessible role
Skeleton
[aria-hidden=true] + [aria-busy=true]
Spinner
status + [aria-busy=true]
Nine dimensions
- Trigger
Skeleton
Initial content loading begins while the expected layout is already known.
Spinner
An operation with unknown remaining duration begins.
- Modality
Skeleton
Non-modal placeholder; unaffected page regions remain usable.
Spinner
Non-modal status indicator unless the surrounding workflow independently blocks interaction.
- Placement
Skeleton
Occupies the same responsive layout and dimensions as the incoming content.
Spinner
Close to the affected region or control without replacing unrelated content.
- Interactivity
Skeleton
Not interactive and not focusable; real controls replace it only when ready.
Spinner
Not interactive; an accessible status communicates that work is still in progress.
- Focus
Skeleton
Focus remains on the existing page; replacing placeholders does not reorder or steal focus.
Spinner
Focus remains on the initiating control unless a documented transition replaces the whole view.
- Dismissal
Skeleton
Skeletons disappear only when replaced by content, an empty state, or an actionable error state.
Spinner
The indicator ends when work resolves or is cancelled; it is never a manually dismissible message by itself.
- Accessible role
Skeleton
[aria-hidden=true] + [aria-busy=true]
Spinner
status + [aria-busy=true]
- Use case
Skeleton
Loading a card or article layout whose shape is known
Spinner
A short operation has no meaningful completion value
- Mobile behavior
Skeleton
Match the mobile content geometry so replacement does not cause a layout jump.
Spinner
Reserve stable space and pair the indicator with concise status text when waiting is noticeable.
| Dimension | SkeletonSkeleton | SpinnerSpinner |
|---|---|---|
| Trigger | Initial content loading begins while the expected layout is already known. | An operation with unknown remaining duration begins. |
| Modality | Non-modal placeholder; unaffected page regions remain usable. | Non-modal status indicator unless the surrounding workflow independently blocks interaction. |
| Placement | Occupies the same responsive layout and dimensions as the incoming content. | Close to the affected region or control without replacing unrelated content. |
| Interactivity | Not interactive and not focusable; real controls replace it only when ready. | Not interactive; an accessible status communicates that work is still in progress. |
| Focus | Focus remains on the existing page; replacing placeholders does not reorder or steal focus. | Focus remains on the initiating control unless a documented transition replaces the whole view. |
| Dismissal | Skeletons disappear only when replaced by content, an empty state, or an actionable error state. | The indicator ends when work resolves or is cancelled; it is never a manually dismissible message by itself. |
| Accessible role | [aria-hidden=true] + [aria-busy=true] | status + [aria-busy=true] |
| Use case | Loading a card or article layout whose shape is known | A short operation has no meaningful completion value |
| Mobile behavior | Match the mobile content geometry so replacement does not cause a layout jump. | Reserve stable space and pair the indicator with concise status text when waiting is noticeable. |