What Is a Progress Bar?
A progress bar is a visual indicator that shows how much of a task or process is complete, usually as a horizontal bar that fills from empty to full. It reassures users that something is happening and how much longer it will take, whether a file is uploading, a form is submitting, or a checkout is underway. By making waiting visible and finite, progress bars reduce anxiety and abandonment. They come in two forms: determinate bars showing an exact percentage, and indeterminate ones that signal ongoing activity.
- What it shows
- How much of a task or wait is complete, filling from empty to full
- Two types
- Determinate (known percentage) and indeterminate (activity only)
- Common uses
- File uploads, form submission, checkout steps, and page or app loading
- Why it matters
- Visible progress reduces perceived wait time and task abandonment (NN/g)
- Native element
- HTML has a built-in progress element for accessible bars (MDN)
- Accessibility
- Screen readers need the value and state via the element or ARIA (WCAG 2.2)
What a progress bar is #
A progress bar is a graphical element that communicates how far along a task or wait has advanced, most often as a horizontal track that fills from one end to the other as completion increases. Its purpose is simple but important: to tell the user that something is happening and roughly how much longer it will take. Without such feedback, a user faced with a frozen-looking screen quickly assumes the site is broken and gives up. Progress bars appear whenever a process takes more than a moment, a file uploading, a payment processing, a large page loading, or a visitor moving through a multi-step form. They turn an anxious, uncertain wait into a visible, finite one. There are two broad kinds, one that shows an exact percentage and one that only signals ongoing activity, and choosing correctly matters. A progress bar is a small component with an outsized effect on how patient and confident users feel. Our /services/ui-ux-design and /services/conversion-optimization work use them to keep visitors engaged through unavoidable waits.
Determinate versus indeterminate bars #
Progress bars come in two fundamental types, and using the right one matters. A determinate progress bar shows measurable progress, filling to a specific percentage because the system knows how much work remains, as when uploading a file of known size. This is the more reassuring kind, because it answers the user's real question: how much longer? An indeterminate progress bar, by contrast, signals that something is happening without knowing when it will finish, often shown as a moving stripe or a looping animation. It is used when duration genuinely cannot be predicted, such as waiting on a slow external server. The rule of thumb is to prefer a determinate bar whenever you can measure progress honestly, and fall back to an indeterminate one only when you truly cannot. Showing a fake determinate bar that stalls at ninety percent frustrates users more than an honest indeterminate one. Choosing the right type is part of respecting the visitor's patience. Our /services/ui-ux-design work matches the indicator to what the system actually knows, so feedback stays truthful and reassuring.
Why progress bars cut abandonment #
Progress bars work because of how people experience waiting. Research into user experience consistently finds that a visible, well-designed progress indicator reduces the perceived length of a wait and lowers the rate at which users abandon a task (NN/g). The reason is psychological: uncertainty is what makes waiting unbearable. A blank or frozen screen gives no clue whether the process will take one second or never finish, so anxious users leave. A progress bar removes that uncertainty by showing motion and, ideally, a nearing finish line, which encourages people to hang on. It also signals that the system is working rather than broken, preventing the panicked refreshes and back-button presses that can corrupt a transaction. For anything that takes more than about a second, this reassurance directly protects completion rates, and completion rates are revenue on a checkout or a sign-up. A missing progress indicator is a quiet source of lost conversions. Our /services/conversion-optimization work treats waiting states as part of the funnel, because an abandoned upload or checkout is a lost customer.
An accessible native progress bar #
The HTML progress element renders a determinate bar and is announced correctly by screen readers without extra work.
<!-- Determinate: 70% complete -->
<label for="upload">Uploading photo</label>
<progress id="upload" value="70" max="100">70%</progress>
<!-- Indeterminate: activity with no known end -->
<progress></progress>Progress through multi-step flows #
Beyond loading and uploads, progress bars guide users through processes made of several steps, such as a checkout, an account setup, or a long form split across pages. Here the bar, often shown as a labeled series of steps, tells the visitor how many stages remain and where they currently stand. This kind of step indicator has a powerful effect on completion: seeing that they are on step two of three encourages people to finish, whereas an open-ended form of unknown length invites abandonment. It also sets expectations, so a visitor commits to the process knowing its scope rather than feeling ambushed by endless additional fields. Good step indicators label each stage clearly and show completed, current, and upcoming steps distinctly. Breaking a long task into visible, finite steps almost always converts better than one intimidating wall of fields. This is a standard tactic in checkout and lead-form design. Our /services/conversion-optimization and /services/ppc-landing-pages work use step progress indicators to keep visitors moving through forms toward a completed purchase or enquiry.
Making progress bars accessible #
A progress bar must communicate to everyone, including visitors who cannot see it. Sighted users read the fill level at a glance, but a screen-reader user needs the same information announced. The native HTML progress element handles this automatically, exposing its value and maximum so assistive technology can report the percentage complete (MDN). When developers build a custom animated bar instead, they must supply the equivalent information using ARIA roles and value attributes, and update them as progress changes, or the bar is meaningless to those users. WCAG 2.2 underpins these expectations. There are further considerations: progress animations should not rely on color alone to convey state, and continuous motion should respect users who have asked their system to reduce motion, since spinning or pulsing animations can cause discomfort. An indeterminate bar in particular should be implemented so it announces activity without trapping a screen reader in endless updates. Building these details correctly is routine for a professional. Our /services/ada-compliance work ensures progress indicators inform every visitor, not just those watching the screen.
Progress bar design best practices #
A few principles keep progress bars helpful rather than misleading. Above all, be honest: the bar should reflect real progress, not a scripted animation that races to ninety percent and stalls, which erodes trust the moment users notice. Prefer a determinate bar whenever progress can be measured, and reserve indeterminate indicators for genuinely unknown waits. Keep the bar visible and clearly associated with the task it describes, and pair it with a short label so users know what is loading. For very fast operations, consider whether any indicator is needed at all, since a bar that flashes and vanishes can feel jarring. For multi-step flows, label the steps and show which are done. And ensure the whole thing works for keyboard and screen-reader users. These small choices add up to an experience that feels smooth and trustworthy during unavoidable waits. Getting them wrong makes a site feel slow or deceptive even when it is fast. Our /services/ui-ux-design work treats these waiting states as designed moments rather than afterthoughts left to chance.
What progress bars mean for your site #
For a business, progress bars matter most wherever a visitor has to wait or work through steps to give you money or their details. An upload, a payment, a booking, or a multi-page form are all points where an anxious, uninformed wait causes people to abandon and disappear. A clear progress indicator at each of these points keeps visitors patient and moving forward, directly protecting your conversion and completion rates. The cost of getting this wrong is invisible in your analytics unless you look for it: you see abandoned carts and half-finished forms but not the frozen screens that caused them. If your checkout or lead form has a high drop-off rate, missing or misleading progress feedback is worth investigating among the causes. It is a small design detail with a direct revenue impact. Our /services/conversion-optimization work examines exactly these moments, and a /free-website-audit can highlight where waits and multi-step flows may be silently costing you customers who simply were not sure anything was happening.
The bottom line on progress bars #
A progress bar is a visual indicator of how much of a task or wait is complete, turning an uncertain, anxious pause into a visible and finite one. It comes in two forms, determinate bars that show a real percentage and indeterminate ones that only signal activity, and honest use of the right type keeps users patient. Progress bars reduce perceived wait time and cut abandonment, which makes them quietly valuable on uploads, payments, and multi-step forms where drop-off costs you customers. The native HTML progress element gives an accessible bar for free, while custom ones must supply the same information to screen readers. Above all, a progress bar must tell the truth about progress; a fake or stalled one does more harm than none. For a business, these waiting states are part of the conversion funnel. If your forms or checkout lose people midway, our /services/conversion-optimization page and a /free-website-audit can help you find and fix the friction.
FAQ
What is a progress bar used for?
A progress bar shows how much of a task or wait is complete, reassuring users that something is happening and how much longer it will take. It appears during file uploads, payment processing, page loading, and multi-step forms. By making waits visible and finite, progress bars reduce anxiety and stop users from abandoning the task.
What is the difference between a determinate and indeterminate progress bar?
A determinate progress bar shows measurable progress, filling to a known percentage because the system knows how much work remains. An indeterminate one only signals that activity is happening, without predicting when it will finish, often as a looping animation. Use determinate whenever you can measure progress honestly; reserve indeterminate for genuinely unknown waits.
Do progress bars reduce abandonment?
Yes. User-experience research shows that a visible, well-designed progress indicator lowers the perceived length of a wait and reduces how often users abandon a task. Uncertainty is what makes waiting unbearable, so showing motion and a nearing finish line encourages people to stay. On checkouts and forms, that directly protects completion rates and revenue.
How do I add a progress bar in HTML?
Use the built-in progress element. Set a value and a max for a determinate bar, like a 70-percent upload, or leave value out for an indeterminate one. The native element is announced correctly by screen readers automatically. For custom-styled or animated bars, developers add CSS and ARIA attributes to keep them accessible.
Are progress bars accessible to screen readers?
They can be. The native HTML progress element exposes its value and maximum, so screen readers announce the percentage automatically. Custom animated bars must add ARIA roles and value attributes and update them as progress changes, or they mean nothing to those users. Progress animations should also respect reduced-motion preferences to avoid discomfort.
Should short waits have a progress bar?
Usually not. For operations that finish almost instantly, a progress bar can flash and vanish in a way that feels jarring rather than helpful. Indicators earn their place when a wait lasts more than about a second. For very brief actions, subtle feedback or none at all is often smoother than a blink-and-gone bar.
How Local Web Advisor checks this for you
Is your own website getting web design right?
Our free AI audit scans your site and tells you — in plain English — exactly what to fix for web design and seven other areas, with the business impact and the fix for each. No login needed to start.
Run my free website audit →Was this helpful?