NProgress: progress bar on YouTube and Medium

Many noticed that a small new UI element appeared on YouTube and on Medium - a progress bar in the form of a thin color bar at the very top of the page, which perched right under the browser panel.

The recent U.S. New UI Pattern: Website Loading Bars on UsabilityPost has drawn attention to the new element . As it turned out, the reason for using the progress bar is that instead of loading a new page, the content is loaded via JavaScript, and therefore the browser’s own indicator of page loading may not work. So that the user does not have the feeling that the page is "frozen", this function was transferred to the shoulders of a small UI-reception.

Now everyone has the opportunity to quickly make exactly the same progress bar on their site thanks to the NProgress.js [ Demo ] [ GitHub ] plugin .

For the plugin to work, you need to connect jQuery, nprogress.js and nprogress.css. Using it is not more difficult - just call it start()and done()- the first thing that comes to mind is to bind them to Ajax calls - ajaxStart and ajaxComplete events:

NProgress.start(); // начать "загрузку"
NProgress.done(); // заставить индикатор дойти до конца и пропасть

There are also advanced features:

NProgress.set(0.3); // установка конкретного процента
NProgress.inc(); // увеличение прогресса на случайный процент
NProgress.configure({ ease: 'ease', speed: 500 }); // конфигурация скорости загрузки и CSS easing
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 }); 

PS And there is also a version for those who prefer AngularJS.