AJAX activity indicator

Users are familiar with indications of work performed in background since first versions of MS Windows. Besides being fancy, they are also informative.

AJAX, a Web 2.0 technique, aim at exchanging only small amounts of data with a server; this should be performed behind the scenes. If so, why not expose the moments when user interaction brings about reqest and response from a server? Remeber my previous post about using prototype.js for making AJAX request? I use prototype also for indicating background actions on web pages that support AJAX.

You’d never guess how easy it is to such indicator.

First, you must register an action which accurs in case of an AJAX-related event. The best way to do that is add the following code in the head section of the HTML code (remember to include prototype.js library before it!):

<script type="text/javascript">
<![CDATA[
Ajax.Responders.register({
    onCreate: function(){ Element.show('spinner')}, 
    onComplete: function(){Element.hide('spinner')}
});
]]>
</script>

Then, further in the code inside body section, add this:

<img alt="spinner" id="spinner" src="gfx/spinner.gif" 
    style="display:none;" />

Actually, it’s all. Whenever you click an object which sends an AJAX request to the server, the indicator defined by img appears and is visible until the response is obtained.

Wonder, how to create an indicator animation? Generate one on ajaxload.info

3 Responses to “AJAX activity indicator”


  • You know, I have to tell you, I really enjoy this blog and the insight from everyone who participates. I find it to be refreshing and very informative. I wish there were more blogs like it. Anyway, I felt it was about time I posted, I’ve spent most of my time here just lurking and reading, but today for some reason I just felt compelled to say this.

    Thank you and best regards!

    The Satisfied Lurker… :)

    ====================================
    http://www.ContentSpinnerPro.com/

  • very effective and simple, thx ;)

  • Hello

    I put it in my code, but not work fine.

    Why?

    Thanks.

Leave a Reply