A how-to guide to create a YouTube-like loading bar with jQuery and add it to your website in a few lines of code.

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:

YouTube's Cool Progress bar
Preview of red-colored YouTube progress bar

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.

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.

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.