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.
Choice criteria, links and sources
- Progress barChoose Progress bar if a task has a reliable completion value, such as an upload in bytes.Open entry Progress bar
- SkeletonChoose Skeleton if a page region loads content whose layout is known in advance.Open entry Skeleton
See the nine dimensionsSee the sources
Wait and track progress
Try it
Is duration unknown, measurable, or should the content shape be preserved?
Progress bar
Shared trial context
A workspace waits for content or an operation to finish and communicates only the progress it can measure honestly.
Progress bar
Mission
Progress bar
Start the upload, observe a mid-progress value, cancel, restart, and reach the completed state.
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 labeled progress element exposes bytes and percentage while the file transfers.
- Edge case
- If the server stops providing reliable values, the UI switches honestly to an indeterminate busy state instead of faking progress.
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.
What this example shows
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.
Which fits your need?
Progress bar
Uploading a file with reliable byte progress
Skeleton
Loading a card or article layout whose shape is known
Difference and sources
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.
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.
Label
The persistent text that names a control or field.
Decision
Family question
Is duration unknown, measurable, or should the content shape be preserved?
Three criteria to choose
- Use case
Progress bar
Uploading a file with reliable byte progress
Skeleton
Loading a card or article layout whose shape is known
- Interactivity
Progress bar
Usually read-only; its value and label update as measurable work completes.
Skeleton
Not interactive and not focusable; real controls replace it only when ready.
- Accessible role
Progress bar
progress
Skeleton
[aria-hidden=true] + [aria-busy=true]
Nine dimensions
- Trigger
Progress bar
A measurable task begins and reports completed versus total work.
Skeleton
Initial content loading begins while the expected layout is already known.
- Modality
Progress bar
Non-modal progress status; blocking behavior belongs to the surrounding task, not the bar.
Skeleton
Non-modal placeholder; unaffected page regions remain usable.
- Placement
Progress bar
Adjacent to the task, file, or step whose progress it represents.
Skeleton
Occupies the same responsive layout and dimensions as the incoming content.
- Interactivity
Progress bar
Usually read-only; its value and label update as measurable work completes.
Skeleton
Not interactive and not focusable; real controls replace it only when ready.
- Focus
Progress bar
The progress indicator does not receive focus; focus remains on the operation controls or current task.
Skeleton
Focus remains on the existing page; replacing placeholders does not reorder or steal focus.
- Dismissal
Progress bar
It ends only on completion, failure, or explicit cancellation and is replaced by the matching final status.
Skeleton
Skeletons disappear only when replaced by content, an empty state, or an actionable error state.
- Accessible role
Progress bar
progress
Skeleton
[aria-hidden=true] + [aria-busy=true]
- Use case
Progress bar
Uploading a file with reliable byte progress
Skeleton
Loading a card or article layout whose shape is known
- Mobile behavior
Progress bar
Use the available width and keep the label or numeric value readable without tiny overlays.
Skeleton
Match the mobile content geometry so replacement does not cause a layout jump.
| 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. |