<

Voyager
Voyager

Progress bars

A progress bar component communicates to the user the progress of a particular process.

33.3% Complete
HTML Copy 

<div class="qw-progress qw-progress-bar-primary">
    <div class="qw-progress-bar qw-progress-bar-primary" role="progressbar" aria-label="Progress bar example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">0% Complete</span>
    </div>
</div>

To ensure the progress bar is accessible, define the range of values possible for the bar, as well as the the current value, using aria-valuemin, aria-valuemax, and aria-valuenow attributes. It must also have a label, using either aria-label or aria-labelledby

Has description

Descriptive progress bars include the default .qw-progress element, but are wrapped by a .qw-progress-labeled. Within this wrapper the description and visible value are displayed. The visible value is hidden using aria-hidden="true" so the value is not presented twice to non-sighted users.

Visible description
HTML Copy 

<div class="qw-progress-labeled">
    <div class="qw-progress-label-header" id="progressbarID">
        <span>Visible description</span>
        <span aria-hidden="true">60%</span>
    </div>
    <div class="qw-progress">
        <div class="qw-progress-bar qw-progress-bar-primary" role="progressbar" aria-labelledby="progressbarID" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        </div>
    </div>
</div>

Showing values

All progress bars have a label. Visible labels can either accompany the progress bar, or be placed within the progress bar. Visible labels embedded within the progress bars are only allowed on the Large and X-Large progress bars. Visibly labeled progress bars include the default .qw-progress element, but are wrapped by a .qw-progress-labeled.

HTML Copy 

<-- Label shown above -->
<div class="qw-progress-labeled">
    <div class="qw-progress-label-header text-right" id="pb-1" aria-hidden="true">60%</div>
    <div class="qw-progress">
        <div class="qw-progress-bar" role="progressbar" aria-labelledby="progressbarID" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
    </div>
</div>
HTML Copy 

<--Progress label within -->
<div class="qw-progress-labeled">
    <div class="qw-progress-label-header text-right" id="pb-1" aria-hidden="true">60%</div>
    <div class="qw-progress qw-progress-lg">
        <div class="qw-progress-bar" role="progressbar" aria-labelledby="progressbarID" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
    </div>
</div>

Sizes

Add a class, .qw-progress-sm, .qw-progress-lg or .qw-progress-xl to the .qw-progress to adjust the progress bar height. Progress bars fill the width of the container they're placed within.

Size: Small
60%
Size: Default
60%
Size: Large
60%
Size: X-Large
60%

Colors

Colors classes are added to the .qw-progress-bar element: .qw-progress-bar-primary, .qw-progress-bar-success, qw-progress-bar-warning, and .qw-progress-bar-danger.

Important: Convey meaning to all users

Color provides a visual meaning to elements, but not to users of assistive technologies - such as screen readers. If the color change is anything other than decorative, ensure the meaning is included through alternative methods, i.e. text hidden via accessible methods.

Color: Default
60%
Color: Primary
60%
Color: Success
60%
Color: Warning
60%
Color: Danger
60%

Comparisons

Comparing the value of the current item against other related items is achieved throught the use of comparison pins. Only show comparisons on X-Large progress bars.

Up to 5 comparison markers can be placed on a progress bar. Add .qw-comparison-pin and qw-comparison-pin-1 (through 5). For accessibility, each pin must have a description for non-sighted users.

Comparison 1: 72.5%
Comparison 2: 61.6%
Comparison 3: 87.3%
Comparison 4: 88%
HTML Copy 

<div class="qw-progress qw-progress-overflow qw-progress-xl">
    <div class="qw-progress-bar qw-progress-bar-primary favorable" role="progressbar" data-segmentid="1" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74.32%; left: 0;">
        <div class="qw-progress-text-inside qw-progress-text-inside-relative " aria-hidden="true">74%</div>
    </div>
    <div class="qw-comparison-pin qw-comparison-pin-1" style="left: 72.52%">
        <span class="sr-only">Comparison 1: 72.5%</span>
    </div>
    <div class="qw-comparison-pin qw-comparison-pin-2" style="left: 61.64%">
        <span class="sr-only">Comparison 2: 61.6%</span>
    </div>
    <div class="qw-comparison-pin qw-comparison-pin-3" style="left: 87.29%">
        <span class="sr-only">Comparison 3: 87.3%</span>
    </div>
    <div class="qw-comparison-pin qw-comparison-pin-4" style="left: 88.06%">
        <span class="sr-only">Comparison 4: 88%</span>
    </div>
</div>