Animated Step Progress Bar In Pure JavaScript

Preview:

Description:

An animated, responsive, pure JavaScript progress bar used to indicate the current step / stage you’re currently on. Great for multi-step form wizard.

How to use it:

Load the main style sheet in the header of the webpage.

<link href="css/main.css" rel="stylesheet" />

Create a container where you’d like to place the progress bar.

<div class="progress-bar-wrapper"></div>

Place the main JavaScript file at the bottom of the webpage.

<script src="js/progress-bar.js"></script>

Initialize the progress bar and set up the full and current steps.

ProgressBar.init(
  [ 'Request Submitted',
    'Received Responses',
    'Negotiation Done',
    'Hired Professional',
    'Service Completed'
  ],
  'Hired Professional',
  'progress-bar-wrapper'
);

We can set animation delay as following in ms (default 1000).

ProgressBar.singleStepAnimation = 1500;