Progress Bar

Status

Component checklist

Key points

• Progress bars provide a visual representation of the state of a process as a percentage value
• Always include a label and progress percentage as two separate text areas
• Only use if the wait time is expected to be longer than one second
• This component should be used for a determinate process — use a spinner for an indeterminate process
• Do not use different colour tokens to style the progress bar
• Progress bars can appear on base or inverted surfaces
• Web has one size variant, React Native has two size variants: medium (default) and large

Use a progress bar to show users the completion status of a known process.

Determinate vs indeterminate

Progress bars are specifically for determinate processes where completion can be calculated. For indeterminate processes (unknown duration), a spinner or indeterminate progress indicator is more appropriate.

Progress bars, like spinners, should be placed in the centre of the container to give context to the size of the content being processed.