Navigation
Display

Progress Bar

Determinant progress indicator used throughout the mobile app.

Anatomy

Options

Height

Linear progress bars can be either short or tall depending on context. Short progress bars are used in sidebars on course views at tablet widths. Short progress bars tend not to have labels.

Color

Progress bars indicator in use today are either Mastery Purple or Cobalt, although they theoretically could be any of our canonical colors.

Label

Progress bars tend to have labels by default, but short progress bars (used in sidebars at tablet width) do not have labels as a pattern.

Disabled

Progress bars can be disabled or active. When disabled, they appear semi-opaque.

Active and Inactive states of a linear progress bar.

We'll soon be deprecating this site. For the latest version of our documentation, go to our Storybook site!