20 Nice Animated GIF Loading Solutions with JavaScript Animation Libraries

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.


Sampled by © JavaScriptBank.com

---

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 Phong Thai is a Web Developer, Web Coder for 16 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

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Free Web Chat box Plug-ins and Add-ons
Top 10 Best JavaScript eBooks that Beginners should Learn
50+ Beautiful Resources of HTML Form using CSS and JavaScript
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com