Progress Bar
A visual representation of the completion of a goal or task.
General Guidelines
A progress bar is a linear determinate indicator to show how much of a task has been completed and how much is still left to do.
Usage
Configurations | When |
---|---|
Use a progress bar | When the user needs to know how much of a task is complete and how much is left. |
Use a progress bar | When a visual indicator of progress is needed |
Do's and Don'ts

Do use content with the progress bar
A visual representation of the completion of a goal or task.
spacing, size, padding, and typography

A visual representation of the completion of a goal or task.
Examples
For details on when to use this component, see the Usage tab.
<div class="iris-progress-bar iris-progress-bar--info">
<h3 class="iris-progress-bar__title font-weight--500">$350</h3>
<progress class="iris-progress-bar__meter"
role="progressbar"
aria-valuemin="0"
aria-valuenow="70"
aria-valuemax="100"
aria-valuetext="$350 out of $500 required"
value="70"
max="100">
</progress>
<span class="iris-progress-bar__secondary-info font-size--xs">$500 required</span>
</div>
States
The states for this component are as follows:
Positive
<div class="iris-progress-bar iris-progress-bar--positive">
<h3 class="iris-progress-bar__title font-weight--500">$350</h3>
<progress class="iris-progress-bar__meter"
role="progressbar"
aria-valuemin="0"
aria-valuenow="70"
aria-valuemax="100"
aria-valuetext="$350 out of $500 required"
value="70"
max="100">
</progress>
<span class="iris-progress-bar__secondary-info font-size--xs">$500 required</span>
</div>
Negative
<div class="iris-progress-bar iris-progress-bar--negative">
<h3 class="iris-progress-bar__title font-weight--500">$50</h3>
<progress class="iris-progress-bar__meter"
role="progressbar"
aria-valuemin="0"
aria-valuenow="10"
aria-valuemax="100"
aria-valuetext="$50 out of $500 required"
value="10"
max="100">
</progress>
<span class="iris-progress-bar__secondary-info font-size--xs">$500 required</span>
</div>
Neutral
<div class="iris-progress-bar iris-progress-bar--neutral">
<h3 class="iris-progress-bar__title font-weight--500">$250</h3>
<progress class="iris-progress-bar__meter"
role="progressbar"
aria-valuemin="0"
aria-valuenow="20"
aria-valuemax="100"
aria-valuetext="$250 out of $500 required"
value="20"
max="100">
</progress>
<span class="iris-progress-bar__secondary-info font-size--xs">$500 required</span>
</div>
Info
<div class="iris-progress-bar iris-progress-bar--info">
<h3 class="iris-progress-bar__title font-weight--500">$350</h3>
<progress class="iris-progress-bar__meter"
role="progressbar"
aria-valuemin="0"
aria-valuenow="70"
aria-valuemax="100"
aria-valuetext="$350 out of $500 required"
value="70"
max="100">
</progress>
<span class="iris-progress-bar__secondary-info font-size--xs">$500 required</span>
</div>
Accessibility
As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:
- The
role="progressbar"
attribute should always be present to display the progress status of a goal or a task. - To indicate the progress values to a screen reader user, the attributes for
aria-valuemin
,aria-valuenow
,aria-valuemax
andaria-valuetext
MUST be populated with values. - For browser compatibility the attributes
value
andmax
MUST be present at all times and should be populated with the same values asaria-valuenow
andaria-valuemax
.
Variables
The variables used in this component are as follows:
// Background colors
$progress-bar-meter-background: $alto !default;
$progress-bar-meter-foreground-info: $steel-blue !default;
$progress-bar-meter-foreground-negative: $thunderbird !default;
$progress-bar-meter-foreground-neutral: $dove-gray !default;
$progress-bar-meter-foreground-positive: $forest-green !default;
// Font Colors
$progress-bar-title-color: $mine-shaft !default;
$progress-bar-secondary-info-color-info: $dove-gray !default;
$progress-bar-secondary-info-color-positive: $forest-green !default;
$progress-bar-secondary-info-color-negative: $thunderbird !default;
$progress-bar-secondary-info-color-neutral: $dove-gray !default;
Themeability
Nothing is themeable in this component.