NProgress: progress bar on both YouTube and Medium

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

Attention to the new element drew the recent popular post New UI Pattern: Website Loading Bars on UsabilityPost . 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 about the page load may not work. In order to prevent the user from feeling as if the page was “frozen”, this function was shifted onto the shoulders of a small UI device.

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

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

 NProgress.start(); //  "" NProgress.done(); //        

There are 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.