Progress bar

A progress bar indicates a percentage of completion.

Examples

base-progress-bar--default

Open in Storybook

Loading story...

View in Pajamas UI Kit →

Structure

Progress indicator: Solid shape indicating the current percent of completion.
Track: Background indicating the available space the progress indicator can fill.

Guidelines

When to use

To represent percentage of completion or progress of an activity, process, or task.

When not to use

To indicate that content is loading, use a skeleton loader or spinner instead.
To segment tasks that are related and linear, use a stepper instead.

Sizes

Extra small
Small
Medium

TODO:

Add size use cases. Create an issue

Behavior

The progress indicator is a static representation of progress at a given point of time and doesn't animate.

Content

The progress bar component should be supported by visible text indicating what the bar is for, and the units of progress represented. See Reference for additional considerations.
The aria-label or aria-labelledby content should also clarify the purpose of the progress bar.

Accessibility

Progress bars aren't focusable elements, but they can be accessed with a screen reader's read/browse mode.
Use the HTML <progress> element in conjunction with either aria-label or aria-labelledby.
The WAI-ARIA progressbar role can also be used.

Reference

Although browser support is good for <progress>, screen readers handle them inconsistently. You may want to consider hiding it from screen readers and relying on visible text instead. For more details, read Scott O'Hara's post, Styles Progress Bar.

Code reference

GlProgressBar

Value

The value prop can be a Number or String. If not given, it will default to 0.

Variants

The following variants are available:

'primary' (default)
'success'
'warning'
'danger'

Maximum

A custom maximum can be set with the max prop. If not given, it will default to 100.

Width and Height

The GlProgressBar will always expand to the maximum width of its parent container. The height can be controlled with the height prop. The value should be a standard CSS dimension (px, rem, em, etc.) and given as a String, e.g. '20px'.