Personally, I simply love the combination of CSS3 and jQuery so that’s why today, we will see a couple of CSS3 and jQuery loading animations. But, surely we need to remember that CSS3 animations are not yet supported in older browsers and some of the new browsers also (Opera doesn’t support full CSS3 features, but probably will be supported in the future).
Most of the CSS3 and jQuery animations that we provide today are quite handy when loading Ajax content, and you can create your custom animations easily from our starting points. We also provide some Canvas animations also.
10 CSS3/jQuery loading animations
spin.js is a nice library for creating a circular animation. There are a lot of options you can chose to customize the circular animation (lines, length, width, radius, speed, etc) and no images or external CSS is required. jQuery support is provided but is not required. Also, uses VML as fallback for old IEs.
2. CanvasLoader Creator
CanvasLoader is a free online tool you can use to generate scripted preloaders (spinners or throbblers) that you can use in your HTML5 projects. There are some great options to customize your preloader like diameter, density, range, FPS or speed and you can also choose the canvas animation color or shape.
3. CSS3 Loading Animation
Alessio Atzeni has written a nice tutorial how to create CSS3 animations that can be used as a preloader for images. Currently the CSS3 animation works only in Firefox, Safari and Chrome.
4. Flickr Style Loading Animation Using JQuery
A well written tutorial about how to accomplish a Flickr like animation.
5. CSS3 Loading Animation
Another great share from Alessio Atzeni who created a simple CSS3 loading animation. As usual, support for this kind of animations is limited to Firefox, Safari and Chrome (for the moment).
6. CSS Loading Animation Circle Style
7. Sonic – Looping loaders
8. Ajax Style Loading Animation in CSS3
A nice tutorial on how to create awesome CSS3 Ajax style loading animations. No images are required to accomplish this.
9. Bouncy Animated Loading Animation
10. CSS3 loading spinners (no images)