Skip to main content

Youtube Like Progress bar using jQuery Nprogress.js

 

If you ever notice on Youtube you have seen a progress bar on top of the page, which shows you the page loading time. Now a days most of the Apps and Web pages are using this kind of Progress effect to attract viewer and force them to stay for few seconds on page until it loads.

The dynamic in-site progress bar on Youtube shows the loading animation on the top header area till the video or page load completely in the browser. Normally loaders are the rounded .gif images with different effects, which shows a progress but here the progress loader bar is actually a slim progressive line on the top of the header, which loads from left to right or vise versa until the page finish the loading stage.

jQuery plugin Nprogress.js

NProgress is a tiny jQuery plugin for creating a slim and nanoscopic progress bar which features realistic trickle animations to convince your users on the webpage that something is happening. Its really a perfect way to say a user to stay or wait for the page until it finish its loading. A heavy ajax apps or webpages are using this effects to enhance user experience.

How to use?

You probably need The Nprogress.js plugin, which is available free from its ricostacruz.com but as its jQuery plugin you also need to install latest jQuery let see the example:

Download The Nprogress.js from http://ricostacruz.com/nprogress/

  • Add jQuery library and Nprogress plugin js inside <head> tag like

  • Include Nprogress style inside <head> tag like

  • Now call the Nprogress jQuery .start() and .done() methods and bind it with jQuery’s setTimeout method, you can also use different jQuery method to star and finish the progress bar effects.

Conclusion

Nprogress.js required jQuery 1.8+ library, you can also modify the color of the bar which is defined in nprogress.css. You can find the example at ricostacruz.com for more advanced usage find the GitHub page at github.com

 

Hardik Joshi

Hardik Joshi is Founder, Developer and Writer at eCodezone.com, He loves to write usable code for the Web and other digital sources.