36 How to Create an Animated Page Loading Icon (Ajax Style)
April 29, 2008 / Filed under:

You've probably seen "ajax-style" loading icons before. These small animations appear on web-pages while page elements are loading, and disappear (or are replaced by content) when the page has fully loaded.

Inspired by the page loading feature I noticed in Meta-Microcosmos, I decided to find out how to add an animated ajax-style loading icon to Blogger templates.

After a little trial and error, I discovered a solution which is cross-browser compatible and can be added to your template in one easy step. So in this tutorial, I'll explain how you can add an ajax-style page loading icon to appear in the top corner of your Blogger template which disappears once the page has loaded.

The loading icon used for this tutorial is the same as that which appears in the top-right hand corner of this blog when you load the page:

This small, unobtrusive image has a minimal file size, and is easy on the eyes so it doesn't detract from other style elements of the page.

Of course, if you would prefer to use a different icon, you can change the URL of the image in the code used for this hack as I will explain shortly.

Adding the Loading Icon to your Template

Adding this page loading icon is as simple as copying and pasting a section of code!

Simply go to Layout>Edit HTML in your Blogger dashboard, and find the opening <body> tag.

Then replace this tag with the following section of code (copy to your clipboard, then paste this in place of the <body> tag):

<body onLoad='init()'>
<span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'><img border='0' src='http://bloggerbuster.com/images/loading.gif'/></span>
<script>
var ld=(document.all);

var ns4=document.layers;
var ns6=document.getElementById&amp;&amp;!document.all;
var ie4=document.all;

if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;

function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>

You can then preview your blog to see the page loading icon appear in the top right-hand corner of your blog template momentarily until the page has loaded.

Providing there were no errors received when you previewed the page, you can then proceed to save your template.

That was easy, wasn't it?

Changing the Animated Icon

Of course, some of you may prefer to use a different animation to the one featured here.

Any animated GIF image may be used as a page loading icon, and all you have to do to alter the image is change the URL in this line of the script to match the location of your preferred image instead:

<span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'><img border='0' src='http://image-host.com/your-loading-image.gif'/></span>

Ajaxload is a really useful resource for generating your own color styles of image loading icons. Alternatively you can find a great selection over at Sanbaldo.com

Adding text to the loading icon

You can even add an explataroty "loading..." message to your icon by adding this just before the icons image tags, like this:

<span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'>Loading...<img border='0' src='http://image-host.com/your-loading-image.gif'/></span>

A little info about this script

I had originally experimented with the script used in Meta-Microcosmos to feature the loading icon which is housed in the <head> section of the template.

However, this caused some problems when viewed in IE6 as this caused the icon to appear above the template, rather than in the corner (it occasionally caused the page to freeze too!).

So instead I adopted this version which uses the body onload function to cause the script to take action. This ensured that the icon appeared correctly in all browsers I have tested in, including IE6 and 7, Firefox and Flock.

If you notice any problems in other web browsers, please let me know about this!

Also you may have noticed the need to "escape" certain HTML characters within the script itself. This is because Blogger parses JavaScript differently when it is featured in the body (rather than the head) section of the template. However, when you look at the source code of your template, you will see the original script coded correctly.

Final Thoughts

While this Blogger hack may be mostly cosmetic, it is a fun and interesting feature which can add style and personality to your template design.

I hope this article has been useful for you! If you have enjoyed this tutorial, please consider subscribing to Blogger Buster for future tutorials and Blogger news.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

36 Comments:

  1. You´re so right, Amanda! I always forget IE6 :$
    In LoadInfo you can also generate personalized loading icons, but I like butterflies...

    ReplyDelete

  2. very useful tip!!!!!

    thanks!

    ReplyDelete

  3. i want to ask you, about a wordpress like pagination in blogger...is that posible?

    thanks!

    ReplyDelete

  4. For Yo Misma:

    Load Info is a really useful resource! Thank you for the link!

    For Vassileios:

    As yet, the pagination is very difficult to implement in Blogger blogs. I have made a few unsuccessful attempts at this so far, but as soon as I can find a working solution I will be sure to post this here!

    Thank you both for your comments!

    ReplyDelete

  5. Thank u..thank u...thank u..amanda.
    i love u.

    by the way how about ur 2 little monster. Still little or becoming giant monster???lol

    ReplyDelete

  6. oops...in IE7, it is loading all the time. i tried to reload IE7 couple of times but still loading continuously.

    how can i solve this prob..amanda

    also like to mention that in my country most of the reader use IE7.so it's annoying both for me and them that it's loading all the time.:(((

    ReplyDelete

  7. Very useful!! Thanks again.

    ReplyDelete

  8. wow amanda...you are super cool...thanks a lot...love it.... :)

    ReplyDelete

  9. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "body" must be terminated by the matching end-tag "".

    help...

    ReplyDelete

  10. Very Cool!!

    **Using it**

    ReplyDelete

  11. Please, have a look on www.barriodebenalua.es (corner up-left), I put your useful loading code with my own gif, and it´s showing always behind the header banner. How can I put it on the front??
    Thank you very much for your useful blog!!!

    ReplyDelete

  13. Thanx! You can create your own loading icons here (http://www.ajaxload.info). :)

    ReplyDelete

  14. how to change loading position nearly pointer.. but thx it's work for me..

    ReplyDelete

  16. Hey Amanda, it's a great add-on! But I have a tabber by barelyfitz and it's not working. The tabber doesnt load along with another scripts... Do you know how to fix this problem? Thanks!! :D

    ReplyDelete

  17. Thanx so much cute Amanda :)
    very nice tip

    ReplyDelete

  18. Thank Amanda. Sending you kiss for this trick.
    Anyway, is there a way to show this widget in the centre and in the front of template?
    I tried to mess a little with the code, but I was and able to convince the image to stay on top of a template.
    Any advice?

    ReplyDelete

  19. great .. it actually works.
    what if you wanted it to appear in the centre and hide the page untill it loads? like a loading screen?

    ReplyDelete

  20. style is ajax but can we use ajax for opening the blog posts...???
    ProBogBooster.com

    ReplyDelete

  21. thank you so much...
    it's very nice tip

    ReplyDelete

  22. I still learn how embed this code on my blog, your code some not well formed on my html template. can I modified this code amanda?

    ReplyDelete

  24. Thank you very much for the extensive explanation.

    ReplyDelete

  26. thank you so much, you're a great help.

    ReplyDelete

  27. can you help me fix slow loading of my blog? it takes 22 seconds before it starts displaying content.

    here's the url http://directionsonweb.blogspot.com/

    thank you so much.

    ReplyDelete

  29. These are some detailed steps. Thanks for sharing these. Appreciate it!

    ReplyDelete

  30. Nice information,Ankara escort
    many thanks to the author.Ankara escort
    It is incomprehensible to me nowAnkara escort
    , but in general,Escort ankara bayan
    the usefulness and significance is overwhelming.Ankara escort
    Thanks again and good luck!
    Ankara escort
    became the first designer in Wimbledon's 133-year history to create official uniforms for the tournamentescort bayan ankara
    As part of this year's event, which starts next week.
    will introduces the first ...Escort ankara
    determinationEscort ankara
    to maintain and enhance the values for which our two brands are famous throughout the world.Escort ankara
    The rugby ralph lauren brand brings to Wimbledon the look of timeless elegance,Escort ankara
    drawing on our rich history and traditionsEscort ankara
    expert and i like your blog and the information you have
    mentioned in this post about the Google tools is really great!
    escort bayan
    escort bayan ankara
    escort bayan ankara
    escort bayan ankara kızılay
    Escort ankara bayan
    escort bayan ankara çankaya
    Ankara escort bayan
    Ankara escort bayan
    Ankara Escort

    Thanks for sharing. Very impressive

    ReplyDelete

  33. the blog is interesting! thanks for sharing this useful info

    ReplyDelete

  34. London Crumpet has a message board where London escorts and agencies can post their messages about their services or announce people about any update of their profile. Visitors can also rate the escorts on Hot or Not gallery and give some credentials to the escorts they like.

    ReplyDelete

  35. London Asian Escorts is an Asian and Oriental escort agency operating in Central London. The agency provides escort service for a true gentlemen.

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Subscribe to: Post Comments (Atom)

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

Connect with me:

9rules Essentially Unknown
© Blogger Buster 2010 Home | About | Contact | Hire Me