Material Design Inspired Progress Bar with CSS3 and Pure JS – Mprogress.js

Preview:

Description:

Mprogress.js is a JavaScript library to created linear progress indicator that fills from 0% to 100% using CSS3 powered animations. There’re 4 types of linear bar you can use in your project: Determinate, Buffer, Indeterminate and Query Indeterminate & Determinate.

Basic Usage:

Load the required Mprogress.css and Mprogress.js in your project.

<link href="mprogress.css" rel="stylesheet">
<script src="mprogress.min.js"></script>

Initialization.

var mprogress = new Mprogress();

Start and show progress bar.

mprogress.start()

Finish and hide bar.

mprogress.end()

Set a percentage.

mprogress.set(0.5)

Increase by a little.

mprogress.inc()

Changelog:

08/30/2016

• Allow multiple instances with the same template option on the same page