--- title: "Progress indicator UI: variants and examples | Kombai" description: "A progress indicator is a bar, ring or step count that shows how much of a task is done and how much is left." canonical_url: https://kombai.com/glossary/progress-indicator/ author: "The Kombai Team" --- # Progress indicator A progress indicator is a bar, ring or step count that shows how much of a task is done and how much is left. - Also called: progress bar - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/progress/), [30 mobile designs](https://kombai.com/gallery/mobile/progress/) - [Kestrel](https://kombai.com/gallery/inspirations/progress-web-42/) (Web) - [Trailmark](https://kombai.com/gallery/inspirations/progress-ios-24/) (Mobile) - [Savings goals](https://kombai.com/gallery/inspirations/progress-web-45/) (Web) ## 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. ## When to use progress indicator - **Multi-step flows.** Sign-up, checkout and setup flows with a fixed number of steps. - **Measurable work.** Uploads, imports and exports where you know how much is done. - **Goals and limits.** Savings targets, course completion and plan usage. ## When not to use one - **Unknown length.** If you can't measure the work, use a spinner instead of a fake bar. - **A single short step.** One screen needs no "Step 1 of 1". Leave the bar out. - **Steps that change.** If answers add or remove steps, don't promise a total that will jump. ## Anatomy 1. **Track**: The whole task 2. **Fill**: How much is done 3. **Value**: The same amount in text 4. **Step labels**: Name each stage 5. **States**: Done, current, upcoming, focus ## Variants We sorted every progress design in the Kombai gallery and found six patterns. ### 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. - [Driftway](https://kombai.com/gallery/inspirations/progress-web-28/) (Web) - [Alderly](https://kombai.com/gallery/inspirations/progress-ios-10/) (Mobile) - [Loomfield](https://kombai.com/gallery/inspirations/progress-web-11/) (Web) ### 2. Numbered step indicators Named stages joined by a line, with a check on done steps and a highlight on the current one. - [Rent details](https://kombai.com/gallery/inspirations/progress-web-22/) (Web) - [Thistle](https://kombai.com/gallery/inspirations/progress-web-15/) (Web) - [Larkline](https://kombai.com/gallery/inspirations/progress-ios-28/) (Mobile) ### 3. Segmented bars One segment per question or step, common in quizzes and short checkouts, where each answer fills a block. - [Loomcard](https://kombai.com/gallery/inspirations/progress-ios-27/) (Mobile) - [Kestrel](https://kombai.com/gallery/inspirations/progress-ios-21/) (Mobile) - [Marlow](https://kombai.com/gallery/inspirations/progress-ios-4/) (Mobile) ### 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. - [Fernpost](https://kombai.com/gallery/inspirations/progress-web-47/) (Web) - [Thistle](https://kombai.com/gallery/inspirations/progress-web-18/) (Web) - [Milemark](https://kombai.com/gallery/inspirations/progress-ios-5/) (Mobile) ### 5. Rings and donuts A circle that fills around a percent or a count, for checklists and study scores. - [Plinth Studio](https://kombai.com/gallery/inspirations/progress-web-6/) (Web) - [Foxglove](https://kombai.com/gallery/inspirations/progress-ios-25/) (Mobile) - [Marlowe](https://kombai.com/gallery/inspirations/progress-web-40/) (Web) ### 6. Status trackers Orders and deliveries moving through fixed stages, like purchased, shipped and delivered, with the current stage filled in. - [Purchase](https://kombai.com/gallery/inspirations/progress-ios-19/) (Mobile) - [Wildcart](https://kombai.com/gallery/inspirations/progress-ios-12/) (Mobile) - [Kerbside](https://kombai.com/gallery/inspirations/progress-web-44/) (Web) ## 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. - [Bellhaven Rent Studio](https://kombai.com/gallery/inspirations/progress-web-27/) (Web) - [Paperbark](https://kombai.com/gallery/inspirations/progress-ios-9/) (Mobile) - [Halyard](https://kombai.com/gallery/inspirations/progress-web-9/) (Web) ### Checkout and applications Shipping, payment and review steps, or the parts of an application, with the current step marked. - [Solivar](https://kombai.com/gallery/inspirations/progress-web-7/) (Web) - [Fernpost](https://kombai.com/gallery/inspirations/progress-web-46/) (Web) - [Schedule](https://kombai.com/gallery/inspirations/progress-web-4/) (Web) ### Courses and learning Cards sorted, lessons finished and classes in a path, with a bar that brings people back to continue. - [Vellum](https://kombai.com/gallery/inspirations/progress-ios-1/) (Mobile) - [Smart pricing tutorial](https://kombai.com/gallery/inspirations/progress-web-32/) (Web) - [Craftloom](https://kombai.com/gallery/inspirations/progress-web-37/) (Web) ### Goals, plans and usage Money saved toward a target and seats or records used against a plan limit. - [Cairn](https://kombai.com/gallery/inspirations/progress-ios-13/) (Mobile) - [Palisade](https://kombai.com/gallery/inspirations/progress-web-34/) (Web) - [Fernway](https://kombai.com/gallery/inspirations/progress-web-19/) (Web) ## Progress indicator vs similar components | | [Progress indicator](https://kombai.com/glossary/progress-indicator/) | [Loading indicator](https://kombai.com/glossary/loading-indicator/) | [Timeline](https://kombai.com/glossary/timeline/) | |---|---|---|---| | Shows | How far along a task is | That work is happening | Events in order | | Has an end | Yes, 100% or the last step | Not one people can see | Not always | | Best for | Flows, uploads and goals | Short waits of unknown length | Roadmaps and histories | ## Build notes - Use a native 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 - [Loading indicator](https://kombai.com/glossary/loading-indicator/) - [Timeline](https://kombai.com/glossary/timeline/) - [Form](https://kombai.com/glossary/form/) - [Charts](https://kombai.com/glossary/charts/) ## References - [MDN: The progress element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress) - [MDN: aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current) - [Apple Human Interface Guidelines: Progress indicators](https://developer.apple.com/design/human-interface-guidelines/progress-indicators) - [WCAG 2.2: Understanding non-text contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)