Show the steps in a multi step process like a form or a timeline.
Demos
Markers
Markers with text
-
Step 1
Text explaining this step to the user.
-
Step 2
Text explaining this step to the user.
-
Step 3
Shorter text explanation.
-
Step 1
Text explaining this step to the user.
-
Step 2
Text explaining this step to the user.
-
Step 3
Shorter text explanation.
Spaced
-
Step 1
Text explaining this step to the user.
-
Step 2
Text explaining this step to the user.
-
Step 3
Shorter text explanation.
-
Step 1
Text explaining this step to the user.
-
Step 2
Text explaining this step to the user.
-
Step 3
Shorter text explanation.
Animation
Inline text
-
Step 1
-
Step 2
-
Step 3
-
Step 1
-
Step 2
-
Step 3
Vertical
-
Step 1
Text explaining this step to the user.
-
Step 2
Text explaining this step to the user.
-
Step 3
Shorter text explanation.
Vertical spaced
-
Step 1
Text explaining this step to the user.
-
Step 2
Text explaining this step to the user.
-
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