Skip to Main Content

Pelican Design System icon Pelican Design System Progress Indicator

Progress Indicator

Progress Indicators show users their place in a multi-step process.

Edit on GitHub

On this page:

Best Practices

  • Use the Large Progress Indicator when the progress can be easily divided into segments.
  • Use the Small Progress Indicator when the progress is hard to divide into clean segments.
  • Use them in conjunction with Back and Forward Buttons.
  • Put the current step’s info into the <title> within the <head>.

Usage

Large Progress Indicator

Step X of X Description of Step
Go back one step Go forward one step 
<div class="progress-large">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-9 col-md-10">
        <div class="progress-info">
          <div class="progress-step" aria-hidden="true">
            <div class="progress-step-digit">2</div>
          </div>
          <div>
            <span class="progress-description-counter ">Step X of X</span>
            <span class="progress-description">Description of Step</span>
          </div>
        </div>
      </div>
      <div class="col-3 col-md-2 text-right text-end">
        <a href="#" class="btn btn-outline-primary">
          <span class="fas fa-arrow-left" aria-hidden="true"></span>
          <span class="sr-only">Go back one step</span>
        </a>
        <a href="#" class="btn btn-outline-primary">
          <span class="fas fa-arrow-right" aria-hidden="true"></span>
          <span class="sr-only">Go forward one step</span>
        </a>
      </div>
    </div>
  </div>
</div>

Small Progress Indicator

38%
62%
38%
62%
38%
62%
<div class="row">
  <div class="col-12">
    <div class="progress">
      <div class="progress-bar bg-success" role="progressbar" style="width: 38%" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">38%</div>
      <div class="progress-bar progress-bar-striped bg-warning text-black" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100">62%</div>
    </div>
  </div>
  <div class="col-12 mt-2">
    <div class="progress">
      <div class="progress-bar bg-info" role="progressbar" style="width: 38%" aria-valuenow="38" aria-valuemin="0"
        aria-valuemax="100">38%</div>
      <div class="progress-bar progress-bar-striped bg-warning text-black" role="progressbar" style="width: 62%"
        aria-valuenow="62" aria-valuemin="0" aria-valuemax="100">62%</div>
    </div>
  </div>
  <div class="col-12 mt-2">
    <div class="progress">
      <div class="progress-bar bg-danger" role="progressbar" style="width: 38%" aria-valuenow="38" aria-valuemin="0"
        aria-valuemax="100">38%</div>
      <div class="progress-bar progress-bar-striped bg-warning text-black" role="progressbar" style="width: 62%"
        aria-valuenow="62" aria-valuemin="0" aria-valuemax="100">62%</div>
    </div>
  </div>
</div>
Previous
Next
Page top