SASS Progress Tracker is an HTML component to illustrate steps in a multi-step process, for example, a multi-step form, timeline, or quiz.
Must Read: [Bootstrap] Easily Create Self-Managed Wizards With jQuery | jq-wizard.js
SASS Progress Tracker HTML Component
Post Name | GitHub Progress Tracker |
Author Name | NigelOToole |
Category | Form Plugins, Progress Bar |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | January 12, 2022 |
Last Update | July 16, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
Download and insert progress-tracker.css
into the main section of the html document.
<link rel="stylesheet" href="progress-tracker.css">
Create a basic horizontal progress tracker following the HTML structure as follows:
<ul class="progress-tracker"> <li class="progress-step is-complete"> <span class="progress-marker"></span> </li> <li class="progress-step is-complete"> <span class="progress-marker"></span> </li> <li class="progress-step is-active"> <span class="progress-marker"></span> </li> <li class="progress-step"> <span class="progress-marker"></span> </li> <li class="progress-step"> <span class="progress-marker"></span> </li> </ul>
Change the alignment of the markers.
<ul class="progress-tracker progress-tracker--center"> <ul class="progress-tracker progress-tracker--right">
Add a limit to the progress tracker.
<ul class="progress-tracker progress-tracker--border">
Create spaced markers.
<ul class="progress-tracker progress-tracker--spaced">
Add custom text to tags.
<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>
Use square signs instead.
<ul class="progress-tracker progress-tracker--square">
Add click animations to markers or tags.
<ul class="progress-tracker anim-ripple"> <ul class="progress-tracker anim-ripple-large"> <ul class="progress-tracker anim-ripple-double">
moving paths.
<ul class="progress-tracker anim-path">
Create a vertical progress tracker.
<ul class="progress-tracker progress-tracker--vertical">
See Demo And Download

Official Website(NigelOToole): Click Here
This superior jQuery/javascript plugin is developed by NigelOToole. For extra Advanced Usages, please go to the official website.