JavaScript control of throbber

What is a throbber? It’s the thing in the top right of your browser that lets you know data is being fetched. The problem is that Ajax requests don’t trigger it. The browser throbbing can be a subtle expected cue, and it’s the only thing visible across tabs, so it can be nice to be able to toggle it on and off. Unfortunately there are very few ways to make that happen. This method uses a hidden iframe, which increases load across the server but achieves the desired effect.

Warning: there are reports that this is not 100% cross browser, in that not all browsers toggle the loading indicator for iframe loads. However the UI effect should fail gracefully, showing just the loading image.

Throbber Images

Various public domain throbber images can be found on SWiK.net/Ajax.

Practical Use

The throber is used in this wiki you are looking at right now: Wikiality. It is also used in my Ajax web bookmarking app: boz – to show page loads and data submission. In Boz, it’s slightly more integrated with the interface.

Here’s an example of how to toggle the throbber:

JavaScript

document.showThrobber = function()
{
    if ($('throbber'))
    {
        $('throbber').innerHTML = '<span id="ajaxThrobber"><img ' +
                                    'src="http://sandbox.sourcelabs.com/staticimages/indicator.black.gif">' +
                                  '</span><iframe style="display:none;" src="/mfm/?throb=throb"></iframe>';
    }
};
	
document.hideThrobber = function()

{
    if ($('throbber'))
    {
        $('throbber').innerHTML = '';
    }

};

CSS

#ajaxThrobber
{
  position:fixed;
  _position:absolute; /* ie hack */
  right:10px;
  top:10px;
  background:#111;
  color:white;
  font-size:9pt;
  padding:5px;
  display:block;
}

PHP

//throb request
if (isset($_GET['throb']))
{
   for ($i = 0; $i < 120; $i++)
   {
       if (!connection_aborted())
           sleep(1);
   }
   die();
}