<section class="demo-section" aria-labelledby="progress-heading">
  <h2 id="progress-heading">Progress</h2>

  <h3>Linear progress</h3>
  <div class="demo-row demo-row-vertical">
    <div class="progress" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 45%"></div>
    </div>

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

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

  <h3>Sizes</h3>
  <div class="demo-row demo-row-vertical">
    <div class="progress progress-sm" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 60%"></div>
    </div>
    <div class="progress progress-lg" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar" style="width: 80%"></div>
    </div>
  </div>

  <h3>Step indicators</h3>
  <div class="demo-row">
    <span class="progress-step progress-step-md is-complete"><i class="ph ph-check"></i></span>
    <span class="progress-step progress-step-md is-active">2</span>
    <span class="progress-step progress-step-md">3</span>
    <span class="progress-step progress-step-md is-accent">4</span>
  </div>
</section>