15 jQuery Loader, Progress Bar and Content Animations

15 jQuery Loader, Progress Bar and Content Animations

Posted by Rainey

A jQuery loader or jQuery progress bar may seem trivial.  However it can be more important than you think, especially if your site takes a long time to load.  A jQuery loader can let your users know that something good is coming.  Take care though, because with more anticipation comes greater expectation.

Included in this post are some handy jQuery loaders, progress bars and content animations that I have stumbled across.

jQuery Loaders

Loadie

loadie-jquery-loader

Demo | Source

 

Percentage Loader

jquery-percentage-loader

Demo | Source

 

jQuery Ajax Loader & Spinner

aplus-ajax-loader

Demo | Source

 

jQuery.Nimble.Loader

jquery-nimble-loader

Demo | Source

jQuery Circular Progress Bar

circular-jquery-loader

Demo | Source

spin.js

spin-js-jquery-loader

Demo | Source

CSS3 Pie Graph Timer with jQuery

CSS3-Pie-Graph-Timer-with-jQuery

Demo | Source

 

jQuery Progress Bars

Pure CSS3 and jQuery Progress Bar

css-jquery-progress-bar

Demo | Source

jQuery ProgressBar

jquery-progress-bar

Demo | Source

 

Infinite Scrolling

Infinite Ajax Scroll, a jQuery Plugin

Infinite-AJAX-Scroll-jQuery-plugin

Demo | Source

 

Triggered Infinite Scroll

Triggered Infinite Scroll

Demo | Source

 

Content Loading Animations

QueryLoader

query-loader

Demo | Source

 

InnerFade

innerfade jquery loader

Demo | Source

 

Quicksand

Quicksand-jquery-content-animation

Demo | Source

 

Flip!

jquery-flip

Demo | Source

 

 

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


Today in Web Design - Resources
Tagged | , , , ,