Nice Animated Preloader

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 Elliptical 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 upper left square.

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.

Click to enlarge

Under each frame there is 0 sec. latency. 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.