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.

SkeletonChoose Skeleton if the loading region is large and its final shape is predictable, like a card or article.
SpinnerChoose Spinner if the wait is short or the region is small, such as inside a button.

Decision

Is duration unknown, measurable, or should the content shape be preserved?

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.

Skeleton vs Spinner

Skeleton holds the future layout in place while content loads; Spinner is a compact indicator of unknown-length work with no layout hint.

SkeletonChoose Skeleton if the loading region is large and its final shape is predictable, like a card or article.
SpinnerChoose Spinner if the wait is short or the region is small, such as inside a button.

Nine dimensions

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.