How do I create a loading indicator animated gif?

I'd like to create a loading indicator for my webpage. I'm great at Photoshop, but have no idea how to make an animated loading indicator. How would I go about this? All I've planned know is that it will be some sort of circular animation.

Thanks in advance!
zumpoofAsked:
Who is Participating?
 
BillDLCommented:
An animated GIF comprises a number of separate images compressed into the single file as separate frames.  As well as the actual image size and other fairly standard image data, an animated GIF file contains control data to tell supported applications how many frames the file contains, the length of time to display each frame, whether to repeat the frames after one pass has completed, and how many loops to do before stopping. When created, one of the colours in its small colour palette is rendered as transparent.

Different browsers can display the same animated GIF differently, especially where the frame rate is very high and the browser plays the animation slower than intended, but generally they are pretty universal.

A GIF animation is no more than taking a small notepad and drawing stick men in the same place (corner or bottom) on each page with minor differences, then riffling through the pages with your thumb.  The faster you riffle the pages, the smoother the transition as long as the differences on each image are slight.  The more pages you have on the pad and the more minor the differences between the images will create a smoother transition, but the pad needs to be thicker.

The same is true of an animated GIF.  The more frames you have, the larger the GIF file will be and the longer it will take to load.  Additionally, the more unique colours your frames contain (up to the limitations of the colour depth allowable in the GIF format), the larger colour table embedded in the file needs to be, and the GIF file will be larger in file size.  You don't want the visitor to be waiting for the "loading" GIF to display.

An animated "spinner" is usually just around 12 light grey "spokes" arranged in a circle.  You want to create a clock with one hand that appears to sweep clockwise.  In your starting frame you make one of the spokes black, and the adjacent couple of spokes behind it are made a shade of grey lighter than the black spoke, but darker than the rest.  Often the spoke behind the black is made a dark grey, then the one behind that a lighter shade, so they fade out to blend with the light grey ones to infer blurring and therefore forward movement.  In each subsequent frame these reshaded spokes are moved around clockwise by one position, just like a clock face.

Here are ten of the twelve 32 x 32 pixel frames of a simple animated spinner that is set (in a fairly basic editor) to display each frame for 10 hundredths of a second (the timing is usually specified in hundredths of a second) and loop indefinitely.  I think it uses 12 unique colours, which really are just shades of grey.
GIF-Spinner-Frames.jpgHere is the actual GIF file:
example-loader.gif
There are lots of free and online animation utility programs that allow you to customise and download fairly standard web animations like spinners.  Search for something like "loading.gif generator".  here's an example:
 http://www.ajaxload.info/

There may also be some that allow you to upload your own static images and create a custom animation, but Adobe Photoshop is perfectly capable of creating animations and saving out as an animated GIF.  There are some fundamentals to learn before diving in, but fortunately there are thousands of online tutorials.  Search using the key words "create animated loader GIF in photoshop" or something like that,

Here's a really nice donut spinner if you are interested:
http://www.iceflowstudios.com/2013/tutorials/loading-circle-animation-using-photoshop-cs6/

Here is a text and screenshop tutorial for a slightly more traditional "loading.gif" animation:
http://webdesign.tutsplus.com/articles/create-your-own-animated-pre-loader-in-photoshop--webdesign-8542
0
 
zumpoofAuthor Commented:
Welp, that's the best answer I've ever gotten for any question I've ever asked. I also had no idea Photoshop could output animated gifs, I'll give it a try. Thank you so for such a thorough answer.
0
 
zumpoofAuthor Commented:
This answer was well written, thorough, and well illustrated. Thanks, BillDL!
0
 
BillDLCommented:
Thank you zumpoof.  I hope you can create your custom GIF.  It will give you a great sense of satisfaction.

Although Photoshop allows you to "save as" animated GIF files, the method of creating the frames (via "layers") is a lot more complex than many other programs that have this functionality.  The free image viewing and editing application named GIMP is about the closest to Photoshop's functionality you will get from a free application, but similarly it requires that you have a strong grasp of using layers.

If you wanted a simpler to use program, and still have a Windows XP computer, then you can pick up a "Jasc Paint Shop Pro version 7" (or the "Anniversary Edition") VERY cheaply on eBay.  Although it runs on Windows 7, the help feature doesn't work and interfacing with scanners and printers on Windows 7 is problematic, but it runs perfectly on Windows XP.  This application suite includes "Jasc Animation Shop", and the screenshot I posted of the separate frames was from part of the user window.  You can do a custom install and de-select all the superfluous modules and packages, but I'm sure that you still need to install the image editor (Paint Shop Pro) in order to install Animation Shop, because they link directly with each other very well.

There are other free GIF animation editors though, and some are reviewed here:
http://www.techsupportalert.com/best-free-animated-gif-maker.htm

Although I used to use the first one mentioned, namely PhotoScape, read the warning about the bundled "OpenCandy" program that tries to suggest other software to you.

If you are able to (or want to) create your own images to make the separate frames for a GIF from scratch, some of the simple "Animated GIF Creators" might be all that you need for simplicity.  I am about to download and install the old "Microsoft GIF Animator", if I don't already have this installer package stored away with my other older programs.  It looks as though it was part of the "Windows 95 Plus!" pack, so it would work well in Windows 98 and in XP.  I don't know if it ever was available for download at the Microsoft sites as a free program.  It was "last updated Feb 17, 2001", which was just before Windows XP.  Purportedly it runs OK in Windows 7.  It is only available from a 3rd-party software site now, and I don't know the legalities of this.
http://www.snapfiles.com/get/msgifanimator.html

Usually the "portable" versions of programs are the easiest to test out because they are self-contained, can be installed to a USB Flash Drive, and tend not to leave clutter on your computer as long as you don't tick the user options to associate it with specific file types or into the Windows Explorer shell.

Here is another list of freeware GIF animators.
http://listoffreeware.com/list-of-best-free-gif-animator-software/
Some are common to the previous list, but there are some others not mentioned.  As with all freeware, sometimes additional programs are bundled into them and the risk is always yours.

Some animation creators allow you to import image file types other than GIF files for your frames.  Some may also allow you to export the frames of an existing animated GIF file to separate images.  (IrfanView allows you to do this, but so do others).

If using a standard image editor to create images that will form your frames in the final animated GIF, you need to be aware of the fact that a GIF file supports transparency.  One colour can be made so that it is rendered as transparent.  The "loader.gif" that can be seen as an animation above has the white background set as te transparent colour.  That is why, in the blue/grey box containing the attached image, the background of the animation shows as having a background the same colour as the page where it is sitting.

JPG images do not support transparency.  If you save a GIF or PNG image that has transparent areas as a JPG, the transparent areas will be converted into an opaque colour, which is usually a white background or "canvas".  Some simple GIF animation programs may require that you already have your images for the frames saved as GIF files with a transparent colour, whereas others may allow you (e.g. using a colour picking tool or a colour palette dialog) to choose a colour to render as transparent in the final animated GIF.

Anybody who has ever opened an image that has a transparent area in an image editor will have noticed that the transparent area is shown with a grid of some kind.  The most common is a light grey and white checkerboard pattern, however I am sure that the free IrfanView image editor renders transparent colours in GIF files as black, which can be a little off-putting.

In the screenshot of the separate frames that I posted earlier, I had turned off the checkerboard pattern in the Animation Shop program so that the transparent colour (white in this case) showed as white.  Here is the same screenshot with the checkerboard showing again.
Transparency.jpg
If you see the expression "optimize" shown in an animated GIF editing program, all this usually does is to compress the quality of the images in your GIF file to a stage just before degradation can be noticed, and it usually also allows you to pick your transparent colour.  It may also allow you to reduce the colour palette to a lower number of unique colours by replacing some of the shades (eg. 256 colours 8-bit to 16 colours 4-bit).  Optimization creates a smaller file size.

Another expression that you may encounter is "interlaced" or "non-interlaced".  Interlacing is from a time when we all had to contend with dial-up Internet and had to wait for images on a web page to load.  It places a rough, blurry copy of the image at the beginning of the data stream, which allows people viewing the image on the Internet to see that first rather than looking at an empty space until the image loads completely. The file gradually sharpens as the image loads.  This is unnecessary these days, and very annoying to most, so choose "non-interlaced" if this option is given when saving GIF files.

Always choose GIF89a if you are shown an option to save a GIF as 87a or 89a.  The 87a format is the old one and does not support transparency or animation.

That's about as much additional information that I can think of, and I hope it helps you.

My honest opinion?

I would just use http://www.ajaxload.info/ and would choose one of the less commonly seen animations.  If using this, you need to know the Hex values for colours, unless you are satisfied with grey.  White is FFFFFF and black is 000000.  The easiest way to choose a foreground colour is from the colour picker palette of an image editing program when you have a 16 or 256-colour image open.  That way you know that the hue won't be messed up if the colour palette is reduced when optimizing in an animated GIF editor.  The codes for 256 colours are under the "In The Stone Age" section here:
http://www.w3schools.com/html/html_colors.asp
or here:
http://www.december.com/html/spec/colorsafe.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.