Progress indicator

Progress indicators inform users of an action’s progress, such as loading a page or submitting a form.

How to use progress indicators

Progress indicators are used when retrieving data or performing actions that take a long time. Although they don’t show details about what is going on in the back-end, progress indicators reassure users that their action is being processed.

When using a progress indicator:

  • Use only one type of progress indicator per page
  • Be consistent by using the same type of progress indicator for the same kind of activity
  • Include a short visible label that clearly explains what’s happening to the user
  • Use ARIA to announce the progress indicator to screen reader users
  • Only use if the wait time is expected to be longer than a second

Types of progress indicator

Progress spinner and progress bar

The progress spinner and progress bar are two visually distinct types of progress indicators. Only one type should represent each kind of activity in an experience.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

Determinate or indeterminate

A progress indicator can be determinate or indeterminate.

Determinate indicators display how long a process will take. They should be used in longer processes as they will increase the user’s willingness to wait.

  • Interactive demo - Sainsbury's

Indeterminate indicators express an unspecified amount of wait time. They should be used when the wait time is unknown or the wait time is expected to be short enough that it’s not necessary to display.

  • Interactive demo - Sainsbury's

Page loading indicators

If a user’s action changes the context of the whole page, a page loading indicator overlays the page and prevents the user taking any further actions until the process is complete. The page loading indicator can be used as a progress spinner or progress bar.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

Progress indicators in components

A progress indicator can be placed inside a triggering component. Make sure that repeated clicks are disabled while the indicator is visible.

  • Interactive demo - Sainsbury's

Copy guidelines

Accompany the progress indicator with a short label that explains the state of the process.

Do
Loading
Don't
We're loading that page for you

When the progress indicator is used with a button component, change the label of the button when the button is clicked to show that an action is taking place.

Do
Don't

Was this page helpful?


Get in touch

Our team can answer any questions about using progress indicators or give you a helping hand with your next project.
Select a theme to demo: