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

Category: Javascript , Loading , Recommended | August 30, 2016
Author: lightningtgc
Views Total: 6,044
Official Page: Go to website
Last Update: August 30, 2016
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply