Progress dot indicators

<nav class="progress-bar">
  <ol class="progress-bar__list">
    <li class="progress-bar__list-item progress-bar__list-item--dots visited"><a href="#">Cart</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--dots visited"><a href="#">Billing</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--dots current"><a href="#">Delivery</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--dots final"><a href="#">Review & Pay</a></li>
  </ol>
</nav>

Progress dot indicators + steps counter - best if needed to be visible on phones

<nav class="progress-bar">
  <ol class="progress-bar__list">
    <li class="progress-bar__list-item progress-bar__list-item--dots progress-bar__list-item--count visited"><a href="#">Cart</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--dots progress-bar__list-item--count visited"><a href="#">Billing</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--dots progress-bar__list-item--count current"><a href="#">Delivery</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--dots progress-bar__list-item--count final"><a href="#">Review & Pay</a></li>
  </ol>
</nav>

Progress + text

<nav class="progress-bar">
  <ol class="progress-bar__list">
    <li class="progress-bar__list-item progress-bar__list-item--text visited"><a href="#">Cart</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--text visited"><a href="#">Billing</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--text current"><a href="#">Delivery</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--text final"><a href="#">Review & Pay</a></li>
  </ol>
</nav>

Progress + text + completed icon

<nav class="progress-bar">
  <ol class="progress-bar__list">
    <li class="progress-bar__list-item progress-bar__list-item--text progress-bar__list-item--icon visited"><a href="#">Cart</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--text progress-bar__list-item--icon visited"><a href="#">Billing</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--text progress-bar__list-item--icon current"><a href="#">Delivery</a></li>
    <li class="progress-bar__list-item progress-bar__list-item--text progress-bar__list-item--icon final"><a href="#">Review & Pay</a></li>
  </ol>
</nav>