Progress Bar
进度条
Aliases:进度条加载进度进度指示条百分比进度条上传进度条linear progress显示百分之多少的横条
What is it
A loading indicator where a horizontal bar fills left to right to express task completion, usually with a percentage or step label. For determinate tasks with predictable duration: uploads, downloads, installs and multi-step forms.
Interactive playground
Try it. Make an informed choice.Compare determinate progress with an indeterminate indicator.
Loading lab…
What to look for
- 01Show percentages only when the total is known.
- 02Follow completion with a clear success or failure message.
✓ When to use
- Determinate tasks with known duration (upload, export)
- Step position in a multi-step flow
- Tasks over 3 seconds where magnitude matters
✕ When not to use
- Indeterminate duration — use a spinner or skeleton
- Very short tasks — just let them finish
- Unknown progress — show indeterminate rather than faking it
Variants
Determinate
确定进度
Fills by value when the ratio is known
Indeterminate
不定进度
A slider loop: working, duration unknown
Labeled
带标签
Percentage or step text beside the bar
Implementation
widthtransitionbackground-colorborder-radius@keyframesFixed-height (4–8px) rounded track; fill transitions by width percentage or transform scaleX; indeterminate loops a small block with keyframes. Bind to real progress events — prefer indeterminate over a fake bar. Accessibility: role="progressbar" with aria-valuenow / aria-valuemin / aria-valuemax.
Platform API
<progress>role="progressbar"aria-valuenowIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| ARIA | role="progressbar" |
| HTML | <progress> |
| shadcn/ui | Progress |
| MUI | LinearProgress |
Compare
Full comparison →| Progress Bar进度条 | Skeleton Loading骨架屏 | Loading Spinner加载指示器 | |
|---|---|---|---|
| Interruption | Low — inline, hides nothing | Low — layout unchanged | Low — minimal footprint |
| Information volume | Medium — shows proportion remaining | Low — structure only | Low — busyness only |
| Suitable duration | 3+ seconds, determinate | 1–3 seconds | 1–5 seconds |
| Result consistency | High — must reflect real progress | High | Low — no shape of the result |
Related concepts
A continuously rotating ring or dots that says "work in progress". Tiny in footprint and universally understood, it fits inside buttons, cursors or small regions as lightweight feedback. It communicates busyness only — neither progress amount nor time remaining.
MotionAlternativeGrey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.
PatternsAlternativeAnimates a number from zero (or a previous value) up to its target, so the counting itself tells the story of growth. Common on dashboard KPIs, stats sections and milestones ("100k users") — the digit becomes the animation, far more persuasive than a static figure.
MotionUsed withUpdate the interface immediately as if the operation will succeed while the real request runs in the background; settle on success, roll back to the original state with a notice on failure. It solves the "wait for the server on every action" problem — trading brief uncertainty for a zero-latency feel, ideal for frequent light actions like likes and bookmarks.
PatternsUsed with