Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
Live Demo
Actually clickableWhat you just saw:The thin bar at the top of the screen during an app update, the percentage bar at the bottom while downloading a file, the slim bar under each photo while it uploads.
What it actually is
The key question for a progress bar is whether you know the total. If you do, show a percentage; if you do not, show the indeterminate state (a short bar sweeping back and forth). Do not pretend to have progress you cannot measure.
Anatomy · What it's made of
Track轨道
4px tall, light gray background
Fill已填充
Primary color, width = percentage
Label百分比
Optional, shown right next to it
Indeterminate不确定态
A short bar sweeping back and forth
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| You know the total amount of work and can give a real percentage | Yes |
| The task takes a while (upload, download, install) | Yes |
| People benefit from a quantified "step 3 of 7" sense of progress | Yes |
| You have no idea how long it will take | Depends |
| The action finishes in 0.3 seconds | No |
A progress bar that crawls to 99% and stalls is the worst experience there is — if you are stuck at 99%, switch to the indeterminate state or say why.
Do not animate a fake percentage when the real progress is unknown (crawl evenly to 90% and wait). Users can tell they are being lied to.
Similar Patterns
Don't mix these upProgress BarCurrent
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
Spinner
加载转圈
A circle that keeps spinning to say "loading, please wait" — the simplest loading indicator, and the one most often overused.
In one line:A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
Spinner
加载转圈
A circle that keeps spinning to say "loading, please wait" — the simplest loading indicator, and the one most often overused.
Skeleton
骨架屏
Before the data arrives, lay out the future layout using grey blocks so the shape of the page is already on screen.
Stepper
步骤条
A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
Slider
滑块
A track you drag left or right to land on a value, with the current number always shown beside it.
How to tell AI
Three levels of promptAdd the component name and specifics
Show a progress bar while uploading: since the total size is known, display the real percentage and "Uploaded 3.2MB / 8MB"; turn it green with a checkmark on completion, and red with a retry option on failure.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a progress bar while loading.
Say this instead
Show a progress bar while loading: when the total is known, display the real percentage plus "Uploaded 3.2MB / 8MB", turn green with a checkmark on completion and red with "Retry" on failure; when the total is unknown, use an indeterminate bar sweeping back and forth instead of fake progress.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.