Behavior comparison

Progress bar vs Skeleton

Decisive difference

Progress bar reports how much of a task is done; Skeleton previews the shape of content that is still loading, without any measure.

Progress barChoose Progress bar if a task has a reliable completion value, such as an upload in bytes.
SkeletonChoose Skeleton if a page region loads content whose layout is known in advance.

Decision

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

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.

Progress bar vs Skeleton

Progress bar reports how much of a task is done; Skeleton previews the shape of content that is still loading, without any measure.

Progress barChoose Progress bar if a task has a reliable completion value, such as an upload in bytes.
SkeletonChoose Skeleton if a page region loads content whose layout is known in advance.

Nine dimensions

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.