I love to make loading animation progress bar when I use AJAX on JavaScriptBank.com. Nowadays, we see many loading effects with jQuery in HTML/CSS/JS on many websites, especially those are AJAX driven. JavaScript loading animation is extremely useful to letting users know that the server is processing the cilent's request. Do not under estimate it, it can make a website responsive to user interaction. It's used as an indication of something is happening behind the scene, and inform users to wait for a while.

In the past, the loading animations are usually in animated GIF formats, however, we have many powerful browsers and technology (VML and Canvas), loading animation bars is no longer restricted in animated GIF format, it can be generated with JavaScript and highly customisable. So in this post, JavaScriptBank.com is happy to suggest 20 awesome and creative, useful loading animation libraries to boost your site.

• Demo
• Enlarge
• Reload
• New window

---

Javascript - VML & Canvas

I found total of 5 JavaScript that generate loading animation. Unfortunately, not all of them can work in older browsers such as IE6, 7 and 8. However I found two Javascripts - activity indicator and spin.js that support both VML (IEs support) and Canvas (Modern browsers).

Activity Indicator

A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. This work almost the same with spin.js except it relies on jQuery.

• Lightweight script
• Resolution independent
• Alpha transparency
• Highly configurable appearance
• Works in all major browsers
• Uses feature detection
• Degrades gracefully

Canvas Loader

This plugin replaces typical animated gif loading image with a canvas based loader of the same width and height. This is super helpful when developing mobile apps that might be viewed on Android. It will also detect to see if you have canvas support before applying the replacement. Limited styles, only work in browser with Canvas Support

Sonic Looping Loader

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. This is a really cool javascript preloader, but unfortunately your browser need to support canvas.

• Highly configurable, but only work with browsers with Canvas Support
• Small file size ~3k minified
• Customizable preloader style

HeartCode Canvas Loader

The Heartcode CanvasLoader is a lightweight JavaScript UI library, which uses the HTML5 Canvas element to draw and animate circular preloaders. The Heartcode CanvasLoader runs in every 'good' browser which supports the HTML5 Canvas element.

• Only work in browser with Canvas Support
• An UI to customize preloader

Spin.js

Spin.js can be easily be the best among the rest because of its support of old browsers. It also come with an UI to customize your own preloader.

• No dependencies (jQuery is supported, but not required)
• Highly configurable
• Resolution independent
• Uses VML as fallback in old IEs
• Uses @keyframe animations, falling back to setTimeout()
• Works in all major browsers, including IE6
• MIT License

Animated Gif Generators

Following by Animated Gif version. The difference between animated Gif version and JavaScript version is GIF usually come with a lot of different designs.

Preloaders.net

Chimply

AjaxLoad

LoadInfo

CSS3 Loading Animation

CSS3 Loading Animation Loop

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

CSS Loading Animation Circle Style

Loading CSS spinners and bars generator for AJAX & JQuery

CSS3 loading spinners without images

Bouncy Animated Loading Animation

Simple Loading Modal

PageLoading � jQuery plugin

Image Loader (jQuery Plugin)

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.

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.

That's about it. When I was doing research about it, apparently it's still a new solutions, not many Javascript plugins out there doing it. Thanks for your support.

Author

Phong Thai is a Web Developer, Web Coder for 20 years with PHP, JavaScript, CSS. He is the creator of JavaScriptBank.com - provide thousands of free JavaScript code examples, web development tips and tricks, helpful blogging guides.

Follow him on twitter@js_bank or connect with him on facebook@jsbank if you want. His websites for your knowledge: javascriptON.com, inOneSec.com, www.gomymobi.com

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New