Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I'm sure most of you have seen these but if not, here's one similar to what Facebook uses:

<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>

While it's may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.

<h2>Targeted Indicators</h2>

In my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). 


