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.

Specs: Height: 16px, Fill color: #0063a3 #019aeb, background-color: #fff#252a2e, , border: 1px solid #8c8b96

Small variant

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

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 30 of 40.