Tip: Check Your works at least on three most popular browsers.

This tutorial will teach You how to make simple and clean animated preloader using Adobe Photoshop.

First create new document and set the dimensions to 80 x 80. For background use White colour.

Now we have to set guides (this will help us in future work). Select View -> New Guide and set 40px Horizontal. Next make this same thing for vertical.

Use Horizontal Type Tool (T) and type text (for example Loading... ) and place it in the middle.

Use Eliptical Marquee Tool (M) ,  "draw" a circle and place it in the middle (Use ALT+SHIFT combination when "drawing"). Next create a New Layer (Call it "circle") and fill the selection with black.
Next step is Select -> Modify -> Contract and set it to 5px, hit OK and then Delete.

Now You have to Deselect (CTRL+D). Next use Rectangular Marquee Tool (M) and select uper left squere.

Now with selected "circle" layer hit CTRL+J to duplicate layer. Use this same method for other three corners.
Now You can delete "circle" layer.

Now we can start animation!
Select Window -> Animation. The new bar will open.

Now hide top 4 layers (upper left/right , bottom left/right). This will be our first frame. Then hit Duplicate Selected Frames to create new frame and on new frame unhide bottom left layer.

Now Create six more frames and hide/unhide layers as showed bellow.

Under each frame there is 0 sec. latacy. Click on black arrows and change this to 0.2 sec.
Now just use File -> Save for Web... and save it as GIF file.

Result:

You can use this preloader as CSS top image preloader for example