Progress

Base

The Progress pattern is designed to indicate a customer's progression through a multiple-step process such as product registration.

It consists of a few classes:

  • Progress: The containing element.
    • is-min and is-max: Add these state classes if the progress is 0% or 100%.
  • Progress-bar: The background element showing the full size of the progress bar.
  • Progress-fill: The colored bar indicating the current progress. It requires an inline style or width utility class, and several aria attributes to make it accessible (see below).
  • Progress-marker: A numeric percentage indicator describing the current progress.

Accessibility

The Progress-fill element requires several attributes for accessibility:

  • role="progressbar": Tells assistive devices to treat this as a progress bar.
  • aria-valuenow: The current value of the progress bar (out of 100).
  • aria-labelledby: The id of the element that labels the progress bar.
    • In Voiceover, this is read as "label, N%, progress indicator", so the label does not need to include the word "progress".

Native HTML

In a perfect world, we would use the native HTML <progress> element, but it currently does not have a cross-browser ability to add the marker element our design calls for. If and when it does, however, we should switch because it has accessibility features baked in.

0%

Product Registration: Select Your Model

50%

Product Registration: Dealer Information

100%

Product Registration: Confirm Details

<div class="Progress  is-min">
  <div class="Progress-bar ">
    <div class="Progress-fill " role="progressbar" aria-labelledby="progress-1" aria-valuenow="0" style="width: 0%;">
      <div class="Progress-marker ">0%</div>
    </div>
  </div>
</div>

<h3 id="progress-1">Product Registration: Select Your Model</h3>

<div class="Progress ">
  <div class="Progress-bar ">
    <div class="Progress-fill " role="progressbar" aria-labelledby="progress-2" aria-valuenow="50" style="width: 50%;">
      <div class="Progress-marker ">50%</div>
    </div>
  </div>
</div>

<h3 id="progress-2">Product Registration: Dealer Information</h3>

<div class="Progress  is-max">
  <div class="Progress-bar ">
    <div class="Progress-fill " role="progressbar" aria-labelledby="progress-3" aria-valuenow="100" style="width: 100%;">
      <div class="Progress-marker ">100%</div>
    </div>
  </div>
</div>

<h3 id="progress-3">Product Registration: Confirm Details</h3>