Add a Youtube like Progress bar To Your Site

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

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.

Usage

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.

Github
Website

NProgress

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.

Usage

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.

NProgress.start();
NProgress.done();

Github