Progress bar

This page documents the expected code output and structure necessary to display a progress bar correctly in the UI.

Progress bar base code

The base progress bar relies on a specific HTML structure and set of CSS classes to render correctly.

The example below outlines the two key elements required to create a basic progress bar. The .progress class acts as the wrapper and contains the .progress-bar.

The main outer wrapper .progress-container allows a label, note and helper text to be rendered with the progress bar. The .progress-header acts as the wrapper for the .progress-label and .progress-note.

Validation message
html 
<div class="progress-container">
    <div class="progress-header">
        <label for="Progress-bar-example" class="progress-label">Progress label</label>
    </div>
    <div id="Progress-bar-example" class="progress" role="progressbar" aria-label="Progress label" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 50%"></div>
    </div>
</div>

Indeterminate

To render an indeterminate progress bar add the .progress-bar-indeterminate class to the .progress.

Validation message
html 
<div class="progress-container">
    <div class="progress-header">
        <label for="Progress-indeterminate-example" class="progress-label">Progress indeterminate</label>
    </div>
    <div id="Progress-indeterminate-example" class="progress" role="progressbar" aria-label="Progress indeterminate">
        <div class="progress-bar progress-bar-indeterminate"></div>
    </div>
</div>

Size

To display a small size progress bar add the .progress-sm class to .progress.

Validation message
html 
<div class="progress-bar progress-sm"></div>

Supporting items

Helper text

To include helper text add a <small> with the class .progress-helper directly underneath the .progress inside the .progress-container.

Helper text
Validation message
html 
<div class="progress-container">
    <div class="progress-header">
        <label for="Progress-help-example" class="progress-label">Progress helper text</label>
    </div>
    <div id="Progress-help-example" class="progress" role="progressbar" aria-label="Progress helper text" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">...</div>

    <small class="progress-helper">Helper text</small>
</div>

Progress note

To include progress note text add a <span> with the class .progress-note directly underneath the .progress-label inside the .progress-header.

Progress note
Validation message
html 
<div class="progress-container">
    <div class="progress-header">
        <label for="Progress-bar-example" class="progress-label">Progress label</label>
        <span class="progress-note">Note</span>
    </div>
    <div id="Progress-bar-example" class="progress" role="progressbar" aria-label="Progress label" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">...</div>
</div>

Statuses

Success

Add the .is-valid class to the .progress to give the progress bar its success status. This will add the success icon automatically in place of the .progress-note if one is present, as well as set the .progress-bar width to 100%.

Progress note
Validation message
html 
<div class="progress-container">
    <div class="progress-header">
        <label for="Progress-bar-example" class="progress-label">Progress success</label>
    </div>
    <div id="Progress-bar-example" class="progress is-valid" role="progressbar" aria-label="Progress success" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 100%"></div>
    </div>
</div>

Error

Add the .is-invalid class to the .progress to give the progress bar its error status. This will add the error icon automatically in place of the .progress-note if one is present, as well as set the .progress-bar width to 100%.
The required .invalid-feedback will be displayed and will replace the helper text if present.

Progress note
Validation message
html 
<div class="progress-container">
    <div class="progress-header">
        <label for="Progress-bar-example" class="progress-label">Progress error</label>
    </div>
    <div id="Progress-bar-example" class="progress is-invalid" role="progressbar" aria-label="Progress error" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 100%"></div>
    </div>

    <div class="invalid-feedback">
        Validation message
    </div>
</div>

Modifiers

Expressive colours

To apply the expressive colour palette, add .expressive-* with the corresponding suffix that is associated with the required theme (secondary, tertiary or quaternary).

Validation message
Validation message
Validation message
Validation message
html 
/* Secondary */
<div class="progress expressive-secondary"></div>

/* Tertiary */
<div class="progress expressive-tertiary"></div>

/* Quaternary */
<div class="progress expressive-quaternary"></div>