Progress Bar

Beta · Last modified December 9, 2009

A progress bar (or progress meter) can help set expectations for length of process and for what to generally expect throughout the process, and can also let users know where they are in the flow.

Also known as 'Progress Indicator,' 'Multi-step Progress Bar (or Indicator),' 'Wizard Steps,' 'Progress Train,' and 'Steps Left.'

Delicious Bookmark this on Delicious

What Problem Does This Solve?

The user needs to know where they are in a multi-screen process (such as purchase or set-up).

When to Use This Pattern

Use a progress bar in a wizard or other predefined multistep process that the user may only ever have to complete one time, or at most on rare occasions. Do not use for routine tasks for which a heavy step-by-step handholding will eventually wear out its welcome.

What's the Solution?

Show a progress bar (or progress meter), which is a persistent navigation bar displaying a sequence of steps and highlighting the current step and optionally the degree or percentage of completion so far.

  • The progress bar should begin as soon as the user has decided to start the process.
  • The final step in the progress bar should reflect the last screen where action is required (e.g., Complete Registration, Submit Order). Don't include a passive Confirmation or Receipt Page in the progress bar.
  • Break down steps in a meaningful way. There doesn't need to be a 1:1 step-to-screen correlation as long as it's clear the steps refer to actions rather than individual screens. For example: "Sign In" may involve a sign-in page and registration.
  • Use short names for steps and use parallel construction. Action-oriented verbs are good, but use only if each step can be fairly described this way.
  • Ensure the progress bar is accurate and reliable in all use cases. No user should skip steps or encounter steps that aren't reflected in the progress bar. Be sure to include sign-in as needed. Create different progress bars for different use cases as necessary.
  • Ensure the visual design can't be mistaken for clickable navigation.

Why Use This Pattern?

A progress bar can set expectations for the length of process, give a preview of the overall process, and keep users informed about how far they've progressed in the prescribed flow.


The term 'progress bar' can be applied to an animated bar showing a dynamically updated view of system progress (as in the case of the Progress Bar widget in YUI 2.

This pattern deals with an articulated, multi-step bar or indicator showing stepwise user-controlled progress.