You are here

Page Loading: Animated Progress Indicators (T)

Origianl Source: http://www.webgyver.info/?p=86

If you’re developing AJAX features, or if your database driven web
site requires a few seconds to grab some information, you need some
kind of visual clue, letting your users know that they will have to
wait while something is happening. Right?

Loaders_02

To that end, you could of course come up with some very complex
calculations and display percentages of the progress in a CSS-styled
bar graph element. Or you could just use one of the many available
progress indicators and display some helpful information along with it.

But where do you get those loaders? Create your own animated GIF?
Buy them? Rip them off from another web site? Why . . . just roll your
own with a little help from the following:

Ajaxload – Ajax loading gif generator

Loaders_01

This is by far my most favorite web site for generating animated
loader GIFs. You can easily choose your preferred loader type (bars,
spinning circles, that Firefox thingy, etc.), background color,
foreground color or whether you want the background to be transparent.
All generated GIFs are totally free for your use, as far as the web
site owners are concerned.

Web Script Lab – Ajax Loading Gif Generator

Loaders_04

The one thing I missed at Web Script Lab were the bars, but other
than that, they had pretty much everything else that you can find at
Ajaxload. However, Web Script Lab also gives you the option to adjust
the speed of the animation from normal to fast to slow.

By the way, Web Script Lab also has a Favicon Generator and a tongue-in-cheek but fully functional Web 2.0 Domain Name Generator that can even check on the availability of the randomly genreated domain names.

Ajax loading animated GIF at SanBaldo

Loaders_05

If you’re more into the minimalist approach or just want simple
things, this is the place for you. From what I could gather, these are
homemade animated GIFs, and the author has even provided a license for
their use. Don’t miss the link in the upper right — there are three
more very small animated GIFs on the second page.

For most situations, the animated loading GIFs should suffice to make your web applications and web sites more user-friendly. Any suggestions, comments, concerns or complaints? Let me know. Thanks.

Update (June 21, 2007)

Netlife

The designers at netlife.com.au have graciously made available a nice collection of rather special animated activity indicators.
It’s a free download, and what I especially like about this set is the
fact that the animations a) come in different colors, b) are not of the
typical run-of-the-mill variety and c) can be altered in ImageReady.

Loaders_06

Mentalized

The folks at mentalized.net also have a nice collection of AJAX Activity Indicators (or Animated GIFs designed to indicate your site is doing something).

Loaders_07

The nice things about this collection is that every listed example
is linked to its source (which might lead to more animated activity
indicators).

Napyfab

For a nice (and almost overwhelming) collection of AJAX Activity Indicators, check out the Italian web site napyfab.com. It’s an interesting congregation of “a little bit of everything” that’s almost as entertaining as a Disneyland ride.

Loaders_08


Origianl Source: http://www.webgyver.info/?p=86