HTML Component To illustrate Steps In A Multi-step Process | SASS Progress Tracker

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.

Related Posts

Iconpicker-Bootstrap-5

[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…

bootstrap-multiple-image-upload-with-preview

Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…

Animating-Split-Flap-Displays-fallblatt

A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

jQuery-SyoTimer-Plugin

jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…

vue-js-periodic-table

Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…