Progress
Progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Contents
How It Works
Use the custom progress component for displaying simple or complex progress bars. We don’t use the HTML5 <progress>
element, allowing you to stack progress bars, animate them, and place text labels over them.
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
- Use the
.progress
as a wrapper to indicate the max value of the progress bar. - Use the inner
.progress-bar
to indicate the progress so far. - The
.progress-bar
requires an inline style or custom CSS to set their width. - The
.progress-bar
also requiresrole="progressbar"
and somearia-
attributes to make it accessible.
Example
Put that all together, and you have the following examples.
Additional Features
Alter the appearance of your progress bars with custom CSS, background utilities, stripes, and more.
Labels
Add labels to your progress bars by placing text within the .progress-bar
.
To ensure that the label text remains legible even for low percentages, consider adding a min-width
to the progress bar.
Height
By setting a height
value on the outer .progress
, you change the height accordingly.
Color Variants
Use our color utility classes to change the appearance of individual progress bars.
Conveying Meaning to Assistive Technologies
Please refer to the Accessiblity notes about conveying meaning with color.
Striped
Add .progress-bar-striped
to any .progress-bar
to apply a stripe via CSS gradient over the progress bar’s background color.
Animated Stripes
The striped gradient can also be animated. Add .progress-bar-animated
to .progress-bar
to animate the stripes right to left via CSS3 animations.
Animated progress bars are not available in browsers that do not support CSS3 animations.
Stacked
Include multiple progress bars in a progress component if you need.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for progress component.
Name | Type | Default | Description |
---|---|---|---|
$enable-progress |
boolean | true |
Enable the generation of the progress classes.
Smaller segements of the progress classes can be disabled with the following $enable-* variables.
|
$enable-progress-striped |
boolean | true |
Enable the generation of the striped progress bar rule. |
$enable-progress-animated |
boolean | true |
Enable the generation of the animated progress bar rule. |
$progress-height |
string | 1rem |
Height of progress component. |
$progress-font-size |
string | ($font-size-base * .75) |
Font size for progress component. |
$progress-bg |
string | $uibase-100 |
Background color for progress component. |
$progress-bg |
string | $uibase-100 |
Background color for progress component. |
$progress-border-radius |
string | $border-radius |
Border radius for progress component. |
$progress-box-shadow |
string | map-get($shadows, "i1") |
Box shadow for progress component. |
$progress-bar-color |
string | $white |
Text color for progress bar component. |
$progress-bar-color |
string | $uibase-300 |
Background color for progress bar component. |
$progress-box-shadow |
string | inset 0 .125rem .25rem rgba($white, .25) |
Box shadow for progress bar component. |
$progress-bar-animation-timing |
string | 1s linear infinite |
Timing for animated progress bar. |
$progress-bar-transition |
string | width .3s ease |
Transition rule for animated progress bar. |
Mixins
No mixins available.