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.
40+ Creative Progress Bar Designs, Vol. 2
A progress bar is a graphical representation of the completion of a task, and it is a crucial... Read more
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
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