Loading animation generator

An easier way of creating loading animations use Ajaxload

Last updated on December 15, 2009. Tags: loading animation, review

Animation images (gif) are commonly used as indicator that something is being loaded. You can see an example of such animation on the tab header and address bar while the webpage is loading if you are using Firefox. You can also see this in some websites while loading a larger image after you clicked on the thumbnail¹.

The animation is merely a repeating sequence of images. It is ideal for loading small files less than 500 kb such as an enlarged image or a separate webpage. Larger files (more than 1 Mb) such as Flash presentations and MP3 music files are better off with flash bar preloader (showing the percentage loaded).²

red circles gray lines

One way of creating loading animation is to make your own using any gif animation creating software. Theoretically, any animation gif can be use for this purpose. However, as a temporary replacement of something that takes a time to load, we would want something that loads much faster. Hence, the file size should be small.

Aside from the file size, the actual size of the image in terms of pixels should be much smaller compare to the enlarged image (or external file) being loaded.

The other way doing it is to use loading animation generator such as Ajaxload.

Ajaxload color selection

Creating gif loading animations is very easy using this tool. It has 30 different designs to choose from. You can set the foreground and the background colors by click on a color palette or by typing HTML color code. You can also choose the background to be transparent. The file size of the generated animation gif depends on the design, but it is usually less than 10 kb³; some files can be as small as less than 2 kb.

Ajaxload color selection To generate the gif, simply choose the indicator type (design), the foreground and the background colors. Then, click "Generate it". The resulting gif animation will appear on the red block below. Then, you can then save gif file by clicking on "Download it" or by right-clicking the preview and choosing "Save as".

Footnotes:

One particular technique, called the "Thickbox" opens a window (not a separate browser window or tab) to show the enlarged image while darkening the rest of the page. While the enlarged image is being loaded, a loading animation is shown in its place. I will cover Thickbox in one of my future articles.
This kind of loader is frequently seen to websites made of pure Flash. I am not sure if I will still discuss it in one of my future articles since I am not really fond of Flash.
This is based on my experience in using this online tool. If there is anyone who was able to generate a file size larger than 10 kb, please provide us with details using the comment form below.

Disclaimer:

This is merely a review of a useful tool for webmasters and website developers. I am not in anyway affiliated with the owners of Ajaxload and I do not in anyway claim their trademarks as my own. I shall not be responsible in cases wherein the use of Ajaxload resulted to any unpleasant effect on your computer or website.

Posted by Greten on December 13, 2008 under Webmasters' Tools

Share and Enjoy: