Create Material Design Progress Bar Easily with Mprogress.js

There’s no denying that Google’s material design has radically altered a web. It offers a common pattern language that UI designers can request to all websites mobile apps.

This element pattern trend has led to many libraries, including a renouned Materialize framework. And one of a coolest new element projects I’ve found is Mprogress.js.

This JavaScript library generates a material-style swell bar regulating pristine CSS and JavaScript. No dependencies, no nonsense. Just elementary loading (and preloading) with a element pattern demeanour that’ll compare any website or web application.

The setup is flattering elementary and only requires dual files: a CSS and a JS book from Mprogress.

mprogressjs barmprogressjs bar

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

This can be finished with literally one line of code:

var mprogress = new Mprogress('start');

Other properties can be practical to change a animation timing, speed, or arrangement tone of a swell bar. This pattern even lets we create tradition templates formed on a default element pattern style. Awesome!

Take a look during a demo page to see this loader in action. It’s not a hypnotizing loading bar, however it does offer a good resolution though we wanting to build one from scratch.

You can run methods like set() to set a percentage or inc() to increment a loading bar. It can be rubbed programmatically to emanate an HTTP loader though that does need additional work in JavaScript.

mprogress.js pluginmprogress.js plugin

The beauty of Mprogress.js is its simplicity. It doesn’t tell we how to structure information or what we need to be loading. It could be loading a page, or it could be doing a record upload. Or it could be tracking how distant down a user has corkscrew from a tip of a page.

There is so most we can do with this library and with zero dependencies we can use it for any web project. To get started, check out a MProgress repo on GitHub where we can also crop by a documentation.