Animated Step Progress Bar In Pure JavaScript

Category: Javascript , Loading | October 24, 2016
Views Total:46,777 views
Official Page:Go to website
Last Update:October 24, 2016


Animated Step Progress Bar In Pure JavaScript


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.

  [ 'Request Submitted',
    'Received Responses',
    'Negotiation Done',
    'Hired Professional',
    'Service Completed'
  'Hired Professional',

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

ProgressBar.singleStepAnimation = 1500;

You Might Be Interested In:

Leave a Reply