Create Material Design Progress Bar Easily with Mprogress.js

There’s no denying that Google’s material design has radically changed the web. It offers a common design language that UI designers can apply to all websites & mobile apps.

This material design trend has led to many libraries, including the popular Materialize framework. And one of the coolest new material projects I’ve found is Mprogress.js.

This JavaScript library generates a material-style progress bar using pure CSS and JavaScript. No dependencies, no nonsense. Just simple loading (and preloading) with a material design look that’ll match any website or web application.

The setup is pretty simple and only requires two files: a CSS and a JS script from Mprogress.

You can download both from the GitHub repo or use a package manager such as npm or Bower. From there, you need to create a new Mprogress object and tell it to start the loader.

This can be done with literally one line of code:

var mprogress = new Mprogress('start');

Other properties can be applied to change the animation timing, speed, or display color of the progress bar. This configuration even lets you create custom templates based on the default material design style. Awesome!

Take a peek at the demo page to see this loader in action. It’s not a mesmerizing loading bar, however it does offer a nice solution without you needing to build one from scratch.

You can run methods like set() to set a percentage or inc() to increment the loading bar. It can be handled programmatically to create an HTTP loader but that does require extra work in JavaScript.

The beauty of Mprogress.js is its simplicity. It doesn’t tell you how to structure data or what you need to be loading. It could be loading the page, or it could be handling a file upload. Or it could be tracking how far down the user has scrolled from the top of the page.

There is so much you can do with this library and with zero dependencies you can use it for any web project. To get started, check out the MProgress repo on GitHub where you can also browse through the documentation.

Recommended Reading: 70+ Material Design Resources for Android Developers