Progress Tracker

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

Progress Tracker logo

Features

  • Horizontal or vertical alignment to the start, center or end
  • Reverse the text position
  • Spaced, Square, Dashed, Counter and Inline variants

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.

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.

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" aria-current="step">
    <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, start aligned.
progress-tracker--center Center aligned layout.
progress-tracker--end End aligned layout.
progress-tracker--reverse Reversed layout, i.e. text on top.
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--spaced Space added around markers.
progress-tracker--dashed Path is dashed to a set size i.e. each dash is the same size.
progress-tracker--dashed-even Path is dashed to a fill the space i.e. dash size is dynamic based on available space.
progress-tracker--marker-square Square marker shape.
progress-tracker--anim Allows animation of path.
progress-tracker--inline Marker text is inline with the marker.
progress-tracker--inline-end As above but text is at the end of the marker.
progress-tracker--vertical Vertically aligned layout.

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