Progress Bar
Search the component library

Progress Bar

v2.0.1

Graphical control element used to visualize the progression of an operation such as course copy, course setup, or assignment creation.

Usage Guidelines

Whenever you need to indicate the progress of a system process such as uploading a file, copying a course, etc. use the Progress Bar to provide feedback to the user. This component should generally not be used to present a static “progress”, prefer instead a single bar chart or similar design.

Features

  • Complete vs Incomplete Status
  • Compliance with Accessiblity

Basic Progress Bar

The determinate progress bar shows the user how far along a process with a known start and end point has progressed. For processes with an unknown end point, use the Loading Indicator instead.

As the process proceeds, the bar fills up and the label text is updated. The formatting of the label should be contextual. For example, if you are measuring time, the label might read “5 Minutes Remaining.”

Basic Progress Bar

Options

Alternative text alignment

The progress bar label is centered by default, but can be either left or right aligned if needed.

Left Aligned Progress Bar
Right Aligned Progress Bar

Loading animation

For situations where the process is likely to stall at one or more points for more than a second or two, an animation can be used to indicate that the system is still functioning.

Animated Progress Bar

Redlines

Dimensions
  • Track is 4px wide
  • Progress fill is 12px wide
Spacing
  • Track is 8px below the label
Colors
Label
Animated fill
  • Stripes are 4px wide Digital Ice Blue
  • 8px spacing between stripes
  • Set at 45° angle
  • Stripes animate leftwards at a rate of 100px/6s

Changelog

2.0.1

  • ADDED: Missing spacing details to redlines

2.0.0

  • CHANGED: Rebranded visual style
  • ADDED: Animated option
  • ADDED: Alternative text alignments

1.0.0

Initial version