Progress Tracker

Show the steps in a multi step process like a form or a timeline.

Progress Tracker logo

Demos

Markers

Markers with text

  1. Step 1

    Text explaining this step to the user.

  2. Step 2

    Text explaining this step to the user.

  3. Step 3

    Shorter text explanation.

  1. Step 1

    Text explaining this step to the user.

  2. Step 2

    Text explaining this step to the user.

  3. Step 3

    Shorter text explanation.

Spaced

  1. Step 1

    Text explaining this step to the user.

  2. Step 2

    Text explaining this step to the user.

  3. Step 3

    Shorter text explanation.

  1. Step 1

    Text explaining this step to the user.

  2. Step 2

    Text explaining this step to the user.

  3. Step 3

    Shorter text explanation.

Animation

Inline text

  1. Step 1

  2. Step 2

  3. Step 3

  1. Step 1

  2. Step 2

  3. Step 3

Vertical

  1. Step 1

    Text explaining this step to the user.

  2. Step 2

    Text explaining this step to the user.

  3. Step 3

    Shorter text explanation.

Vertical spaced

  1. Step 1

    Text explaining this step to the user.

  2. Step 2

    Text explaining this step to the user.

  3. Step 3

    Shorter text explanation.

Installation

$ npm install progress-tracker --save-dev

Usage

Add the CSS into your project and add the elements to your HTML.

Markup

<ol class="progress-tracker">
  <li class="progress-step is-complete">
    <div class="progress-text"> ... </div>
  </li>
  <li class="progress-step is-active">
    <div class="progress-text"> ... </div>
  </li>
  <li class="progress-step">
    <div class="progress-text"> ... </div>
  </li>
</ol>

Options

Customize the appearance of the element by adding the variant classes as needed.

Class Description
progress-tracker Default layout.
progress-tracker--marker-counter Adds a numberic counter to the marker.
progress-tracker--marker-dataset Adds text to the marker from data-text on the step.
progress-tracker--marker-square Square marker shape.
progress-tracker--spaced Space added around markers.
progress-tracker--inline Marker text is in line with the steps.
progress-tracker--center Center aligned layout.
progress-tracker--right Right aligned layout.
progress-tracker--reverse Reversed layout, i.e. text on top.
progress-tracker--vertical Vertically aligned layout.
progress-tracker--anim Allows animation of path.

Compatibility

Supports all modern browsers at the time of release.

Demo site

Clone the repo from Github and run the commands below.

$ npm install
$ npm run dev