Behavior comparison

Progress bar vs Skeleton

Choose Progress bar for: Uploading a file with reliable byte progress. Choose Skeleton for: Loading a card or article layout whose shape is known.

Decision

Family question

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

Rule for this pair

Choose Progress bar when Progress bar represents completion over a task and exposes a measured value when available; Spinner is a compact busy indicator, while Skeleton represents the eventual content layout. Choose Skeleton when Skeleton previews content shape; Spinner communicates unknown work compactly, while Progress bar reports measurable completion.

Dimension	Progress barProgress bar	SkeletonSkeleton
Trigger	A measurable task begins and reports completed versus total work.	Initial content loading begins while the expected layout is already known.
Modality	Non-modal progress status; blocking behavior belongs to the surrounding task, not the bar.	Non-modal placeholder; unaffected page regions remain usable.
Placement	Adjacent to the task, file, or step whose progress it represents.	Occupies the same responsive layout and dimensions as the incoming content.
Interactivity	Usually read-only; its value and label update as measurable work completes.	Not interactive and not focusable; real controls replace it only when ready.
Focus	The progress indicator does not receive focus; focus remains on the operation controls or current task.	Focus remains on the existing page; replacing placeholders does not reorder or steal focus.
Dismissal	It ends only on completion, failure, or explicit cancellation and is replaced by the matching final status.	Skeletons disappear only when replaced by content, an empty state, or an actionable error state.
Accessible role	progress	[aria-hidden=true] + [aria-busy=true]
Use case	Uploading a file with reliable byte progress	Loading a card or article layout whose shape is known
Mobile behavior	Use the available width and keep the label or numeric value readable without tiny overlays.	Match the mobile content geometry so replacement does not cause a layout jump.

Try Progress bar Try Skeleton

Dimension

Progress barProgress bar

SkeletonSkeleton

Trigger

A measurable task begins and reports completed versus total work.

Initial content loading begins while the expected layout is already known.

Modality

Non-modal progress status; blocking behavior belongs to the surrounding task, not the bar.

Non-modal placeholder; unaffected page regions remain usable.

Placement

Adjacent to the task, file, or step whose progress it represents.

Occupies the same responsive layout and dimensions as the incoming content.

Interactivity

Usually read-only; its value and label update as measurable work completes.

Not interactive and not focusable; real controls replace it only when ready.

Focus

The progress indicator does not receive focus; focus remains on the operation controls or current task.

Focus remains on the existing page; replacing placeholders does not reorder or steal focus.

Dismissal

It ends only on completion, failure, or explicit cancellation and is replaced by the matching final status.

Skeletons disappear only when replaced by content, an empty state, or an actionable error state.

Accessible role

progress

[aria-hidden=true] + [aria-busy=true]

Use case

Uploading a file with reliable byte progress

Loading a card or article layout whose shape is known

Mobile behavior

Use the available width and keep the label or numeric value readable without tiny overlays.

Match the mobile content geometry so replacement does not cause a layout jump.