Progress Indicator

Use progress indicators to show users where they are in a multi-step process and how much is left to complete.

Step Indicator

Shows numbered steps with labels. Use for processes with distinct stages.

<div class="progress-indicator">
  <ol class="progress-indicator-list">
    <li class="progress-indicator-item progress-indicator-item-complete">
      <span class="progress-indicator-label">Personal details</span>
    </li>
    <li class="progress-indicator-item progress-indicator-item-current">
      <span class="progress-indicator-label">Address</span>
    </li>
    <li class="progress-indicator-item">
      <span class="progress-indicator-label">Contact info</span>
    </li>
    <li class="progress-indicator-item">
      <span class="progress-indicator-label">Review</span>
    </li>
  </ol>
</div>

Progress Bar

Shows a visual representation of completion percentage.

<div class="progress-bar">
  <div class="progress-bar-track">
    <div class="progress-bar-fill" style="width: 60%;"></div>
  </div>
  <span class="progress-bar-label">60% complete</span>
</div>

Progress Bar Examples

<div class="progress-bar-fill" style="width: 25%;"></div>
<div class="progress-bar-fill" style="width: 50%;"></div>
<div class="progress-bar-fill" style="width: 100%;"></div>

When to Use

Use a step indicator when:

• There are 3-6 distinct steps
• Users need to see the overall journey
• Steps have clear, short names

Use a progress bar when:

• Showing percentage completion
• Steps are numerous or variable
• For file uploads or loading states

Don't use progress indicators when:

• The process has only 1-2 steps
• Users can complete steps in any order
• The number of steps varies significantly

Usage Guidelines

Do

• Keep step labels short and descriptive
• Show which steps are complete, current, and remaining
• Update progress as users advance
• Consider if users can navigate to previous steps

Don't

• Don't show misleading progress
• Don't use for non-linear processes
• Don't have too many steps (more than 6)

Accessibility

• Use ordered list for step indicators
• Current step should be announced to screen readers
• Progress bar needs aria-valuenow, aria-valuemin, aria-valuemax
• Text labels should describe the progress

CSS Classes

/* Step indicator */
.progress-indicator { }
.progress-indicator-list { }
.progress-indicator-item { }
.progress-indicator-item-complete { }
.progress-indicator-item-current { }
.progress-indicator-label { }

/* Progress bar */
.progress-bar { }
.progress-bar-track { }
.progress-bar-fill { }
.progress-bar-label { }