Progress bar

The Progress bar informs the user that the system needs time to load content. If you are on web please refer to screen loader guidance page.


There are two types of progress bars, indeterminate and determinate.


The indeterminate progress bar shows that a process is happening, but there's an unspecified amount of wait time.


The determinate progress bar displays how long a process will take. They are used when the progress is very fast or when the progress is changes from unknown to known. The determinate progress bar always plays from 0 - 100% before exiting the frame.

When to use

Progress bars are used when the server cannot reliably predict what content will be loaded next.

If the action take less then 200 milliseconds to load content, no loading state is needed.

If the action takes longer than 200ms the determinate bar is shown for 700ms.

At 700ms we decide to either exit the animation or... the Indeterminate state.

When the app knows what content to load the indeterminate progress indicator changes to a determinate progress indicator.

Three different types of reassuring messages cycle and loop indefinitely.

If there is an unusual long wait time due to poor connection reassuring copy will appear on screen after approximately 5000ms.

Progress Spinner vs Progress Bar

The progress spinner and bar are used to communicate different loading behaviours.

Progress Spinner

The Progress spinner should be used to add reassurance when the user is executing long and/or stressful tasks. Stressful tasks can include situations like, uploading documents, sending money or retrieving card details. To find out more on when to use progress spinners click here.

Progress Bar

The progress bar should be used when the user is performing generic tasks that usually load fast. Generic tasks can include situations like, loading content following navigation or loading data in back ground after an action has been performed.

Placement and Specs

Place a progress bar within the container that's loading. If a group of items is loading, place a progress indicator at the top of the page, to show progress of the whole group.

Progress bar with sizing specifications.
Progress bar placement on a modal
Progress bar placement on a banner
Progress bar placement on bottom sheets

A progress bar can be placed at the top of bottom sheets centred.

Light and dark mode

Light mode and dark mode use different tapestry fills.

Progress bar in light mode

Tapestry 05

Progress Bar in dark mode

Tapestry 08