Behavior comparison
Choose Progress bar for: Uploading a file with reliable byte progress. Choose Skeleton for: Loading a card or article layout whose shape is known.
| 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 | native progress element | aria-hidden placeholders with aria-busy on the content region |
| 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. |