Add YouTube-like loading bar effect to your website

The dynamic in-site progress bar on YouTube is cool. It shows the loading animation in the header area till the video page loads completely in the browser window. The bar is actually a slim progressive line at the very top of the page that appears only when the page is in the loading state.

You may take a look at it while watching a YouTube video, or see the below screen capture for a quick preview of that:

If you’re planning to implement such a cool effect to your site or project too, here is the workaround. Prerequisites? All you need is your site using jQuery and nProgress.

See a Demo

jQuery Plugin for YouTube-like loading effect

The NProgress jQuery plugin makes it really easy to achieve this effect. It looks similar to the YouTube progress bar, and also shows a circular loading animation at the next end of the bar. Creator Ricosta Cruz has called it the Nanoscopic Progress bar.

Assuming your site uses jQuery (1.8+), download the latest version of nProgress and follow the below give directions to have it working:

1. Add the files nprogress.js and nprogress.css to your website or project folder.

2. Copy-paste the below code to initiate the required NProgress functions:

   <script type="text/javascript">
   NProgress.start();
   NProgress.done();
   </script>

3. Save the changes.

That’s it! Revisit your site or project pages to see the effect live.

See a Demo

Notes

• Make sure you are using of jQuery 1.8+, else its not gonna work.

• To modify the color of the bar, you can play with the style #nprogress .bar and #nprogress .peg in nprogress.css. The default color of the bar is #2299dd.

• To remove the default spinner, you should alter its configurations by using below code before triggering nProgress:

  NProgress.configure({ showSpinner: true });

• For advanced usage of the plugin, visit it’s GitHub page.