Navigation

Stepper / Progress Tracker

The .quanta-stepper-line creates a horizontal progress tracker. Each step (.quanta-step) can be marked data-status="completed", "active", or "upcoming".

Basic Usage

Wrap your steps in .quanta-stepper-line, then for each step:

<div class="quanta-stepper-line">
  <div class="quanta-step" data-status="completed">
    <div class="quanta-step-icon"></div>
    <div class="quanta-step-label">Step 1</div>
  </div>
  <div class="quanta-step" data-status="active">
    <div class="quanta-step-icon"></div>
    <div class="quanta-step-label">Step 2</div>
  </div>
  <div class="quanta-step" data-status="upcoming">
    <div class="quanta-step-icon"></div>
    <div class="quanta-step-label">Step 3</div>
  </div>
</div>

Step 1

Step 2

Step 3

Step States

Control appearance with data-status:

data-status="completed" — shows a filled icon and colored line
data-status="active" — highlights the icon border and label
data-status="upcoming" — greyed out

Completed

Active

Upcoming