Progress Bar

Example

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
    <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
    <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
    <div class="progress-bar bg-danger" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
    <div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
    <div class="progress-bar bg-dark" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Anatomy

1. Indicator: Tells the users how far along in a process they are in.

Usage guidelines

Best practices:

1. Only hide the label when it is absolute clear to the user which process the progress bar represents. Note that you are still required to pass an appropriate label which will be read by screen readers.

Progress bar should be used when:

1. You want to show users where they are in a process.
2. You want to display the progress of an operation, e.g when a user uploads a document.
3. The progess can be described with quantitative information, such as a percentage.

Progress bar should not be used when:

1. Manual user actions are required to progress, use a stepper instead.
2. The progress is determined by user actions such as tutorials completed, or storage space, rather than system actions.

Usability guidelines

Use consistent progress bars
Do use one type of indicator bar style and not switch between as this may cause confusion to the user.

Behaviour
Keep progress bar moving to allow users to know their task is progressing. Users may associate a stationary indicator as a stalled process.

Accessibility guidelines

Aria attributes

1. Give an aria-label with the title of the progress bar when there is not a visible title.
2. Set role="progressbar".
3. If the progress bar is describing another region of the page, use aria-describedby="progressbar-id" to connect the two elements.
4. Set aria-valuemin and aria-valuemax to indicate the minimum and maximum progress indicator values. Otherwise, their implicit values follow the same rules as <input-type="range"> in HTML:
   1. If aria-valuemin is missing or not a number, it defaults to 0 (zero).
   2. If aria-valuemax is missing or not a number, it defaults to 100.
5. Supply a value for  aria-valuenow  unless the value is indeterminate, in which case, omit the  aria-valuenow  attribute. Update this value when the visual progress indicator is updated.
6.  If the progress bar is describing the loading progress of a particular region of a page, use  aria-describedby  to reference the progress bar status, and set the aria-busy attribute to true on the region until it is finished loading.

Keyboard accessibility

Focus indicator

Progress bar design tokens

$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: $box-shadow-inset !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;