In this post I’ll share with you two Jquery plugins which you can easily use to add a youtube like progress bar to your site.
Pace automatically monitors Ajax requests, event loop lag, document ready state and elements on the page to decide the progress. Pace is created and maintained by the folks at HubSpot. It comes with 14 themes you can choose from.
Select a theme of your choice and hook it up in your web page along with the pace.js.
That’s it, works out of the box.
NProgress is inspired by Google, YouTube, and Medium. It is authored and maintained by Rico Sta. Cruz. NProgress is perfect for Turbolinks, Pjax, and other Ajax-heavy apps.
Firstly add jQuery(1.8+), nprogress.js and nprogress.css to your project.
And finally call start() and done() to control the progress bar.