SASS Progress Tracker is an HTML component to illustrate steps in a multi-step process, for example a multi-step form, timeline, or quiz.
progress tracker css, progress tracker css responsive, github progress tracker, vertical progress tracker css, responsive progress tracker, progress tracker javascript
[Bootstrap] Easily Create Self-Managed Wizards With jQuery | jq-wizard.js
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">
Pure CSS/SASS Progress Tracker Plugin/Github
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.