Progress indicators from the Kombai gallery: an analytics tool's setup steps, a running club app's onboarding bar and a finance app's savings goals.
What is a progress indicator?
A progress indicator measures a task with a known end: a five-step setup, a 40% upload, a savings goal at $1,200 of $5,000. A track stands for the whole task, a fill or a ring shows how much is done, and a label says the same thing in words.
- The fill only moves forward, and it reaches the end exactly when the task does.
- Steps, percentages or amounts are written next to the bar, so color is not the only cue.
Progress indicators show up across checkout, account setup, quiz and achievements screens.
When to use a progress indicator
- Multi-step flowsSign-up, checkout and setup flows with a fixed number of steps.
- Measurable workUploads, imports and exports where you know how much is done.
- Goals and limitsSavings targets, course completion and plan usage.
When not to use one
- Unknown lengthIf you can't measure the work, use a spinner instead of a fake bar.
- A single short stepOne screen needs no "Step 1 of 1". Leave the bar out.
- Steps that changeIf answers add or remove steps, don't promise a total that will jump.
Anatomy of a progress indicator
This one works. Press Continue or Back, or tab to the buttons and press Enter, and watch the fill and the step labels move.
Set up your shop
- Account, done
- Shop name
- Payments
- Review
Name your shop
Pick a name people will remember. You can change it later.
- Done
- Current
- Upcoming
- Keyboard focus
- TrackThe whole task
- FillHow much is done
- ValueThe same amount in text
- Step labelsName each stage
- StatesDone, current, upcoming, focus
Progress indicator variants
We sorted every progress design in the Kombai gallery and found six patterns. Browse all 50 web and 30 mobile designs.
1. Bars across a flow
The default. A thin bar at the top of each screen of a sign-up or listing flow that fills a little more with every answer.
2. Numbered step indicators
Named stages joined by a line, with a check on done steps and a highlight on the current one.
3. Segmented bars
One segment per question or step, common in quizzes and short checkouts, where each answer fills a block.
4. Setup checklists
A list of tasks with checks and a count or bar on top, like 4 of 5 done, that people finish in any order.
5. Rings and donuts
A circle that fills around a percent or a count, for checklists and study scores.
6. Status trackers
Orders and deliveries moving through fixed stages, like purchased, shipped and delivered, with the current stage filled in.
Where progress indicators show up
Onboarding and sign-up
"Step 1 of 3" and a bar over each question, so people know how much is left before they reach the product.
Checkout and applications
Shipping, payment and review steps, or the parts of an application, with the current step marked.
Courses and learning
Cards sorted, lessons finished and classes in a path, with a bar that brings people back to continue.
Goals, plans and usage
Money saved toward a target and seats or records used against a plan limit.
Progress indicator vs similar components
Build notes
- Use a native <progress> with a label, or role="progressbar" with aria-valuenow.
- Mark the current stage of a step indicator with aria-current="step".
- Show the amount in text too, like "60%" or "Step 2 of 4", not only as a fill.
- Give the fill at least 3:1 contrast against the track (WCAG 1.4.11).
- Be accurate. Apple warns that a bar that hits 90% fast and then stalls feels deceptive.
- When a bar tracks a loading region, point aria-describedby at it and set aria-busy on the region.
FAQ
Progress bar or spinner?
Use a progress bar whenever you can measure the work, and a spinner only when you can't. Apple's guidelines note that people generally prefer a determinate indicator, because it helps them judge what's happening and how long it will take.
Should a multi-step form show the number of steps?
Yes, when the steps are fixed. 'Step 2 of 4' tells people how much is left. If later steps depend on earlier answers, show the name of the current section instead of a total that might change.
What's the difference between a progress bar and a step indicator?
A progress bar shows one amount, like 60% uploaded. A step indicator names each stage of a flow, like Shipping, Payment and Review, and marks the one people are on. Long flows often use both.
How do I make a progress bar accessible?
Use the native progress element with a label, or role="progressbar" with aria-valuenow. Write the value in text as well, mark the current step of a step indicator with aria-current="step" and make sure the fill stands out from the track.
Related terms
All glossary terms · Browse 50 web and 30 mobile progress indicator designs