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.
<script src="/pace/pace.js?x92026"></script> <link href="/pace/themes/pace-theme-barber-shop.css?x92026" rel="stylesheet" />
That’s it, works out of the box.
Firstly add jQuery(1.8+), nprogress.js and nprogress.css to your project.
<script src="scripts/jquery-1.10.js"></script> <link href="nprogress.css" rel="stylesheet" />
And finally call start() and done() to control the progress bar.