Progress Indicators
Search the component library

Progress Indicators

v2.0.1

Progress indicators help users follow the progress of a lengthy operation. Use a progress bar to provide feedback to users to indicate the progress of a system process such as uploading a file, copying a course, etc. 

Note: Use a single bar chart or a similar design to indicate static "progress."

Standard 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 a 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."

Standard 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

DimensionsTrack is 4px wide
Progress fill is 12px wide
SpacingTrack is 8px below the label
ColorsTrack is Concrete
Fill is Digital Marine Turquoise
LabelBasic UI Text in Charcoal
Center aligned by default
Options for left and right aligned positioning
Animated fillStripes 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