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 adata-textattribute 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:
- 10 Best Progress Bar (Linear) Components In JavaScript & CSS
- 10 Best Form Wizard Plugins To Engage Users And Increase Conversions







