Progress Bar

Progress bars are passive indicators used to represent the user’s progression visually in the experience.

Progress bar

How to use a progress bar

Progress bars are non-interactive components that show users the status of an activity, such as loading content, device setup, or media playback. You can change the progress fill color to match an experience.

Note: If you want to enable media playback control, use the slider component.

Progress bars contain the following components, which are numbered to correspond to the screenshot:

  1. Progress fill
  2. Progress buffer (optional)
  3. Progress track

Progress bar component

Types of progress bars

Determinate

Use determinate progress bars to display the progression of an activity with a known duration. Progress bars shouldn't display timestamps or other non-interactive indicators of duration.

Progress bar determinate

Determinate loading

Use the determinate loading progress bars when content is loading.

Progress bar determinate loading

Determinate radial

Use radial progress bars only for the Echo Spot. You can designate that the radial progress bar to be determinate or indeterminate.

Progress bar determinate radial

Indeterminate

Use indeterminate progress bars when you can't quantify an activity’s length, such as in flash briefings and when loading content. The bar uses animation to show that progress is taking place.

Progress bar indeterminate

Indeterminate radial

Use radial progress bars only for the Echo Spot. You can designate the radial progress bar to be determinate or indeterminate.

Progress bar indeterminate radial

Best practices

Use accessibility labels to define progress and the total amount of time to users who use a screen reader. For example, "Twenty seconds out of two minutes."

Try it out

See Create and Edit an APL Document.

Related developer documentation