Pure CSS Multi-Step Indicator – progress-tracker

Category: CSS & CSS3 , Recommended | August 8, 2025
AuthorNigelOToole
Last UpdateAugust 8, 2025
LicenseMIT
Tags
Views10,653 views
Pure CSS Multi-Step Indicator – progress-tracker

progress-tracker is a simple, flexible, responsive, pure CSS/SASS progress tracker builder with optional markers, positions, directions, and animations.

Features:

  • Horizontal or vertical alignment: Supports start, center, or end positions.
  • Reversible layout: Move text above or below markers.
  • Multiple marker styles: Square, circle, counter, and dataset text.
  • Path variants: Spaced, dashed, dashed-even, or animated.
  • Inline option: Marker text inline with the marker.
  • No JavaScript dependency: 100% CSS-driven behavior.

Use Cases:

  • Multi-step forms: Shopping cart checkout processes, user registration flows, and survey completion indicators.
  • Project timelines: Development milestone tracking, project phase visualization, and workflow status displays.
  • Onboarding sequences: User tutorial progress, feature introduction walkthroughs, and guided setup processes.
  • Process documentation: Step-by-step instruction guides, troubleshooting workflows, and procedure documentation.

How  to use it:

1. Install progress-tracker via NPM or grab the CSS file directly from the GitHub repository

# NPM
$ npm install progress-tracker --save-dev

2. Load the progress-tracker.css in the head section of the html document.

<link rel="stylesheet" href="progress-tracker.css">

3. Create a basic horizontal progress tracker. The tracker is built with a standard ordered list (<ol>). Each list item (<li>) represents a step. You control the state of each step using the is-complete and is-active classes.

<ol class="progress-tracker">
  <li class="progress-step is-complete">
    <div class="progress-text"> Step 1 </div>
  </li>
  <li class="progress-step is-active" aria-current="step">
    <div class="progress-text"> Step 2 </div>
  </li>
  <li class="progress-step">
    <div class="progress-text"> Step 3 </div>
  </li>
  ...
</ol>

4. Customize your progress tracker by adding the following variant classes:

  • progress-tracker--center: Centers the entire component and the text within each step.
  • progress-tracker--end: Aligns the component and text to the right.
  • progress-tracker--reverse: Reverses the layout, placing the text above the tracker line.
  • progress-tracker--vertical: Switches the tracker from a horizontal to a vertical layout.
  • progress-tracker--marker-counter: Adds a sequential number inside each step’s marker.
  • progress-tracker--marker-dataset: Populates the marker’s content from a data-text attribute on the step element.
  • progress-tracker--spaced: Adds extra space around each marker.
  • progress-tracker--dashed: Renders the connecting path between steps as a dashed line.
  • progress-tracker--dashed-even: Creates a dashed path where dashes are sized dynamically to fill the space.
  • progress-tracker--marker-square: Changes the shape of the markers from circles to squares.
  • progress-tracker--anim: Enables a simple background animation for the path when a step is completed.
  • progress-tracker--inline: Places the marker and its corresponding text on the same line.
  • progress-tracker--inline-end: Used with the inline variant, it positions the text at the end of the marker.
<ul class="progress-tracker progress-tracker--center">
<ul class="progress-tracker progress-tracker--right">
<ul class="progress-tracker progress-tracker--border">
<ul class="progress-tracker progress-tracker--spaced">
<ul class="progress-tracker progress-tracker--text">
  <li class="progress-step is-complete">
    <span class="progress-marker"></span>
    <span class="progress-text">
      <h4 class="progress-title">Step 1</h4>
      Summary text explaining this step to the user
    </span>
  </li>
  <li class="progress-step is-complete">
    <span class="progress-marker"></span>
    <span class="progress-text">
      <h4 class="progress-title">Step 2</h4>
      Summary text explaining this step to the user
    </span>
  </li>
  <li class="progress-step is-active">
    <span class="progress-marker"></span>
    <span class="progress-text">
      <h4 class="progress-title">Step 3</h4>
      Summary text explaining this step to the user
    </span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
    <span class="progress-text">
      <h4 class="progress-title">Step 4</h4>
      Shorter summary text
    </span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
    <span class="progress-text">
      <h4 class="progress-title">Step 5</h4>
      Shorter summary text
    </span>
  </li>
</ul>
<ul class="progress-tracker progress-tracker--square">
<ul class="progress-tracker progress-tracker--anim">
<ul class="progress-tracker progress-tracker--vertical">

Changelog:

v3 (08/08/2025)

  • A complete rewrite from SASS to CSS custom properties.
  • Its much easier to style and customize as needed.
  • Still a robust and flexible component to use in a variety of settings.

FAQs

Q: How do I handle dynamic steps with JavaScript?
A: You’ll need to manipulate the DOM. To add a step, create a new <li> element with the .progress-step class and append it to the main <ol>. To update progress, you’ll find the current step and the next step in the DOM and swap the is-active and is-complete classes accordingly.

Q: Can I use custom icons for the markers?
A: Yes. The markers are the ::before pseudo-elements on the .progress-step. You can override the default styles to use an image. Set content: '' and then apply a background-image with your SVG or PNG icon. You’ll also need to adjust the background-size and width/height to fit the icon correctly.

Q: How do I integrate Progress Tracker with JavaScript form validation?
A: Progress Tracker focuses purely on visual presentation. You’ll need to write JavaScript that updates the state classes (is-complete, is-active) based on your validation logic. The library provides the visual feedback while your JavaScript handles the business logic.

Related Resources:

You Might Be Interested In:


Leave a Reply