Progress Bar – Live Example

Code for the Progress Bar Example

<h2 class="sr-only">Your Progress</h2>

<div class="progress-bar">
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-valuetext="25%">25%</div>
</div>

<div class="progress-indicators" aria-hidden="true">...</div>

<ol class="progress-labels" role="navigation" aria-label="Breadcrumb Navigation">
  <li>
    <button><span class="sr-only">Step 1: </span>Billing Address <span class="sr-only"> Complete</span></button>
  </li>
  ...
</ol>