10 CSS3 and jQuery Loading Animations Solutions

Posted: August 2, 2012 in Jquery

1. Sonic – Looping Loaders

Sonic is a small (~3k minified) JS “class” you can use to create custom loading animations. It works best with looping animations — i.e. a snake that’s trying to eat its own tail.



2. Bouncy Animated Loading Animation

Just some funzies with CSS3 animations.

Bouncy Animated Loading Animation


3. CSS3 Loading Spinners without Images

CSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing.

CSS3 Loading Spinners

Source + Demo

4. Ajax Style Loading Animation in CSS3 (no Images)

As we all know loading images are very essential part of any website , but some time loading images takes time to load itself, but what if the images made up in CSS. So this time I used CSS3 to develop Ajax style loading animation.

Ajax Style Loading


5. CSS Loading Animation Circle Style

You can make animation for displaying the loading progress using clean CSS3 code. You can increase the size of the spheres by modifying the width and height in style classes: ul#transit li, .sphere and .beat.

CSS Loading Animation


6. Flickr Style Loading Animation using JQuery

The flickr loading animation is simpler than the facebook style, it consist of two circles with different color, when the animation start the circle on the left move to right with on top display and vice versa.

Flickr Style Loading


7. CanvasLoader Creator

The Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders (spinners or throbblers) for your HTML projects.

CanvasLoader Creator

Source + Demo

8. CSS3 Loading Animation

Three simple CSS3 Loading Animations.

CSS3 Loading Animation


9. CSS3 Loading Animation Loop

Three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery.

CSS3 Loading Animation Loop


10. PageLoading – jQuery Plugin

This jQuery plugin that will allow you to show a loading view during the loading of a web page. You will be able in a row and some parameters to customize the loading view. Its colors, loader icon, and the background image of the loading view.



Courtesy: http://www.jquery4u.com/animation/10-css3-jquery-loading-animations-solutions/#.UBo8pfbiZcQ

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s