Monday, January 06, 2014

Animated gifs: how to create them easily

When creating a web site in which your end user has to wait a while, e.g. for loading some data, you'll need some kind of animation. An animated gif is a nice way of doing this. This special kind of image displays multiple pictures in a sequence, just like in old fashioned movies. You can of course try to find and download some animation, but you can also create them yourself with an application or, more easily, online. The latter has the advantange that you can alter the look and feel of the animation to fit the looks of your web site.

Tools

You can find some nice tools to create animated gifs online below:
Ajaxload - Ajax loading gif generator
Preloaders.net - AJAX loading GIF and APNG spinners, bars and 3D animations generator
Load Info - gif generator
Chimply generates your images
The Best Ajax Loading Indicator Generators
Loading APNG free online generator
CSS Load.net - Loading CSS spinners and bars generator for AJAX and JQuery
Heartcode CanvasLoader Creator | Smarter than an animated GIF
Loading Gif Image Generator
AJAX Activity indicators | Animated GIFs designed to indicate your site is doing something
Ajax loading animated gif | SanBaldo - blog personale sulla tecnologia e sugli acquisti online
Loadersuite | Loader animation generator

The alternative: apng

There is another format for animated images, namely apgn (Animated Portable Network Graphics or Animated PNG).
The difference between apng and gif is that the first one supports 8 bit transparency and 24 bit color scheme. So, apng supports partial transparency while gif format supports complete transparency or no transparency only. Moreover, apng supports much more colors than animated gif. Since apng is not widely used, your browser may not support it.