Replace Loading Gear in Blogger's Dynamic View

Before

After

If you have a fast Internet connection, you probably wouldn't have noticed a small loading gear that appears before a Dynamic View blog is opened. In any case, in one of my posts written to explain how this loading gear can be removed, a reader asked if it is possible to replace this icon with an icon of your own. You bet it is! I've already answered this question in the comment itself (ages ago). But what kind of person would I be if I expect readers to look for answers within the comment sections? So here it is..

Go to Dashboard - Template - Customize - Template Designer - Advanced - Add CSS - paste the following code (and customize the code as needed) - Press enter after the last character of the last line } - Apply to Blog.

.blogger-gear, .overview-sspe {
background-image: url('http://i890.photobucket.com/albums/ac106/0roburos/Transformers/transition.gif') !important;
height: 90px !important;
width: 125px !important;
}

i) Replace the URL in Line 2 to that of your own icon/image/GIF. Obviously, you need to have your image uploaded to the Internet first, and have its direct link in hand.
ii) Also, you need to change the height and width in lines 3 and 4. according to your new image.
iii) Don't forget to save your changes in the Template Designer, by hitting the 'Apply to Blog' button, that is.

And remember, if your GIF is too large in size, your page will load first before your GIF, and your GIF will never see the light of day.