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.

Must Read: [Bootstrap] Easily Create Self-Managed Wizards With jQuery | jq-wizard.js

SASS Progress Tracker HTML Component

Post NameGitHub Progress Tracker
Author NameNigelOToole
CategoryForm Plugins, Progress Bar
Official PageClick Here | Click Here
Official Websitegithub.com
Publish DateJanuary 12, 2022
Last UpdateJuly 16, 2023
DownloadLink Below
LicenseMIT

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

github-progress-tracker

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

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *