NProgress: a nanoscopic progress bar like on Medium and YouTube

Everyone has probably noticed the slim progress bar on Medium and YouTube, which is a UI element placed below the browser's address bar.



The main reason to have this kind of progress bar is because the content on the page is switched by JavaScript and the native browser's loading indicator may not work. In this case, users may think that the web page is stuck and not fetching any content.

NProgress.js is a jQuery plugin, which can be used anywhere [Demo][GitHub].

The way you use it is very simple. There are two methods: start() and done() which you may tie to ajaxStart and ajaxComplete.

NProgress.start(); // shows the progress bar
NProgress.done(); // completes the progress

There are also some advanced features:

NProgress.set(0.2); // sets a percentage
NProgress.inc(); // increments by a little
NProgress.configure({ ease: 'ease', speed: 700 }); // adjust the animation by using `ease` and `speed` (in ms)
NProgress.configure({ trickleRate: 0.04, trickleSpeed: 700 });

Also, you should try ngProgress if you are an AngularJS fan.