AJAX-Style Animated Loading GIF


We start with a blank canvas of around 200x100px. We will create a new layer and select the Marquee tool, and on the toolbar for the marquee, set Style to Fixed Size, Width: 4px and Height: 20px:

######

Now we can just click on the canvas and a selection of these dimensions will be made:

######

In our new layer, paint the selection with black:

######


Now right-click the layer and Duplicate Layer. Select the Move tool, hold Shift and press the down arrow key four or five times - shift will move the layer in increments. We should now have two layers like so:

######


With the top layer active, press Ctrl+E to merge down - combining the two line layers together. Now right-click the layer and Duplicate. Goto Edit > Transform > Rotate, and holding down the Shift key, rotate the duplicated layer clock-wise a quarter of a turn:


######

Holding Shift will rotate at increments. Choose the Move tool to accept the changes. Now repeat this process (duplicate then rotate) to fill in all the gaps like so: (it may be wise to number the layers as you duplicate, so that you can keep track of which is which)


######


Now we should have 12 separate layers for each of our 'spokes'. Next, we will color them.
Starting with the first, open up the layer styles and add a color overlay of light gray. You may want to zoom in for a better look.


######


Now right-click the layer you just added a style to and choose Copy Layer Style, then proceed to Paste Layer Style on each of the other, so we have this:


######



Now let's open up the Animation Window by going to Window > Animation. You should see something like this:


######

This is a timeline of our animation. Each frame shown in here will play in order for a set number of seconds. We want to create different frames with different 'spokes' colored, in sequence.
So let's start by changing the colors of the first three spokes. Let's change the color of the first three like so, fading from light gray to dark. The colors we used were #BABABA for the first; #999999 for the second; and #444444 for the third:


######


Ok, we have our first frame. Now let's click on the New Frame button (######

You should notice that frame one remains the same and frame two will accept our changes. Now we only need to repeat this a few more time - one frame per spoke. Make sure you click on the New/Duplicate Frame button before changing the layer styles again!

Once we're done, we should have a timeline that looks like this:


######



We can click the Play button at the bottom of the Animation window to see a preview. If the animation is too slow, we can change the duration in the bottom right corner of each frame. This specifies the duration for each frame to be visible. Let's try 0.1sec. Hold Shift and select all the frames in the window, then choose 0.1 seconds (or choose Other and try 0.05 - or whatever you want) on one of them. This will change all of them, because they're all selected




To export, goto File > Save for Web & Devices. Choose GIF from the DropDown menu - 128 being the best quality. And you can also preview it here as well, using the controls buttons near the bottom:


 
Top