Pure CSS/SASS Progress Tracker

Category: CSS & CSS3 , Recommended | July 4, 2016
Author: NigelOToole
Views Total: 2,423
Official Page: Go to website
Last Update: July 4, 2016
License: MIT

Preview:

Pure CSS/SASS Progress Tracker

Description:

A simple, flexible, responsive, pure CSS/SASS progress tracker builder with optional markers, positions, directions and animations. Built on top of flexbox model and fully customizable in SCSS. No JavaScript required. Perfect for form wizard, timeline, etc.

Basic usage:

Download and insert the progress-tracker.css into the head section of the html document.

<link rel="stylesheet" href="progress-tracker.css">

Create a basic horizontal progress tracker following the html structure as this:

<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 markers.

<ul class="progress-tracker progress-tracker--center">

<ul class="progress-tracker progress-tracker--right">

Add a border 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 the markers.

<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 markers instead.

<ul class="progress-tracker progress-tracker--square">

Add click animations to markers.

<ul class="progress-tracker anim-ripple">

<ul class="progress-tracker anim-ripple-large">

<ul class="progress-tracker anim-ripple-double">

Animate paths.

<ul class="progress-tracker anim-path">

Create a vertical progress tracker.

<ul class="progress-tracker progress-tracker--vertical">