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.

 $350   $500 required 

<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

 $350   $500 required 

<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

 $50   $500 required 

<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

 $250   $500 required 

<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

 $350   $500 required 

<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 and aria-valuetext MUST be populated with values.
For browser compatibility the attributes value and max MUST be present at all times and should be populated with the same values as aria-valuenow and aria-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.