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

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.