Today, here is a list of 5 Progress Loading Lines (YouTube Style) jQuery Plugins , an interesting idea as seen on YouTube! love using this on Angular SPA apps when switching between views. =)

1. nanobar

Very very lightweight progress bars (~730 bytes gzipped). No jQuery needed.

nanobar.jpg
Source + Demo

2. NProgress

Slim progress bars for Ajax’y applications. Inspired by Google, YouTube, and Medium.

NProgress.jpg
SourceDemo1Demo2

3. jquery.ytLoad

A youtube inspired, simple, lightweight jQuery plugin to visualize ajax progress.

jQueryytLoad.jpg
SourceDemo

4. PACE

Automatic page load progress bar.

Pace-JS.jpg
SourceDemo

5. Smooth Progress Bar Loading Effect With jQuery

A simple progress bar with smooth loading effects with jQuery, HTML5 and CSS3. A little bit codes required. With this plugin, you can set your web page to redirect to another page while loading complete.

Smooth-Progress-Bar.jpg
SourceDemo

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • http://eezy.com/ Shawn Rubel

    Hey Sam,

    always staying on top of things; these will come to good use on future projects, thanks a lot!

    • http://jquery4u.com/ jQuery4u

      Thanks mate, yeah it’s the new IN thing! ;)

  • Mert Yaman

    thank you very much :) I love you

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.