Skip to main content

Progress Bars

Progress indicators express an unspecified wait time or display the length of a process.

Specifications

  • A progress indicator is represented by a white bar that is filled with color over time as loading occurs.
  • Height: 16px
  • Border: 1px solid

Small variant

A smaller version is available with same specs as above except, Height: 8px.

Extra Small variant

A smaller version is available with same specs as above except, Height: 4px.

Colors

Element Property Color
Progress Bar Fill
#0063a3
#019aeb
Background
#ffffff
#252a2e
Border
#6a6e79
#6a6e79

Behaviors

  • A progress indicator should fill up to completion as background loading tasks are complete.
  • Whenever possible, show the user a textual representation of their progress that corresponds to the loading indicator.
Completed 40 of 50.