Generate Animated Loading… Images

We’ve all seen animated images on the screen as a video or slideshow is being downloaded and set up for us to view. Sometimes the word “loading…” is the animation itself. Sometimes there’s a horizontal bar or spinning world that alerts us to wait for the media to be loaded.

A few websites provide a way to generate your own animated loading image. They’re online and they’re free. If you’re tired of the same old circular or horizontal animated images, give the following sites a try.

Preloaders.net

It’s easy to generate a multitude of preloader images at preloaders.net, which is by far the most complete animated image generator available. All you do is choose the category of preloaders that you like and then select one preloader image from the spin box. From there you can alter several parameters of the image.

Several categories of preloaders differentiate preloaders.net from its competition, including three-dimensional, astronomy, people, religion signs, rectangular, smileys, social bookmarks, and zodiac signs.

You can choose between a GIF and an APNG image. Specify any color for the foreground and background colors or select a transparent background. Here’s an example animated clock made at preloaders.net:

A slider lets you change the animation speed from slow to very fast. The slowest speed wasn’t quite slow enough and the fastest speed was way too fast, at least for my liking.

The dimensions of the preloader image can be specified as width and height values. A tick can be removed from the “constrain proportions” box to introduce some interesting effects to the animation. Advanced options include means to flip the image, reverse the animation, and inverse the colors.

LoadInfo.net

Loadinfo.net offers a variety of circular, clock-like and spinning images. The foreground and background colors can be any color you choose and the background could be transparent, too. Select one of the three thumbnail sizes (16×16, 24×24, 48×48) for your image and click on ‘generate’ to create it. If you like the image as presented on the screen, download the free image. GIFs created there did not have transparent backgrounds when I tried it, even though the ‘transparent’ feature was selected. The spinning ying-yang symbol seen here was given a white background for a little fake transparency.

ajaxload.info

Ajaxload.info provides a standard set of clocks, bars and flowers that can be modified with respect to foreground and background color. You’re stuck with the speed of the animation and the size of the image, but the background can be transparent. That’s not too many options, but sometimes a simple loading image is all that’s needed.

LoadingAPNG.com

LoadingAPNG is a free online animation generator that offers a few dozen circular and horizontal bar type of animated PNG. The foreground and background colors, width, height and transparency can be modified to suit.

Chimply.com

Chimply offers several clocks or spinners and animated bars that you can modify with respect to colors, transparency and size. Unique to this free online image generator is that several images can be created and temporarily stored in a workspace on the website before wrapping them in a .zip file for easy download. If you click on “Last generated images” near the bottom of the screen, you can see the images that other users have created. GIFs and SWFs can be downloaded.

CSSload.net

Timur Gafforov figured out how to present an animated image using pure CSS. Once HTML5 and CSS3 are more widely accepted and used by browsers everywhere, cssload.net is a source to remember. At the time of this writing CSS3 usage is in its infancy, so for now we’ll rely on small animated GIFs or APNG images to indicate that media is Loading….

CanvasLoader.js

Another way to show animated images on your site is to use pure javascript via CanvasLoader. Use the CanvasLoader Creator to build a script that will create your animated image on the fly. It’s a clock-like oval, spiral, square, rectangle or rounded rectangle that spins around in this animated image. Set the image diameter, density, range, frames per second, speed, and colors. Then, copy the code snippet to create a new CanvasLoader object using javascript.

Make sure to download the CanvasLoader UI library. The minified .js file is less than 6 kb. The custom snippet to produce an animated image is only 8 lines long.

Well, there we have seven sites that can help us make our websites stand out from the crowd. Take caution though, some of these animated images bring back visions of the early Internet, when scrolling marquees were thought to be cool. It’s best to avoid wacky-looking spinning objects unless they suit the style of your site. If you have a game site, maybe a twirling hat or an animated string of cats is appropriate for a loading image. For a more professional look stick to the more common horizontal bars, clocks or circular moving images and modify the colors to match your site.