Showing a Spinning Icon When Using SPServices

Here’s another quick question that ought to be useful to many people as they develop solutions with SPServices. Here’s the original question:

Is there a way to add and animate /_layouts/images/gears_an.gif to my SPServices Page while the Service Request is being processed. Everything I have seen seems to require calling SPLongOperation from the code beside.

This is a pretty common goal. We often want to show some sort of indicator while an AJAX call is happening so that the user knows that something is happening and that they may need to wait for a little while.

There are examples of this all over the Web, from SharePoint to Facebook to Google and beyond. Users expect this sort of feedback from Web pages these days.

The image referenced above ought to be a familiar one to frequent SharePoint 2007 users (it’s also available in SharePoint 2010):

Here’s a simple example of how to show this image while a call to a Web Services with SPServices is happening, snipped from one of my test pages:

var waitMessage = "<table width='100%' align='center'><tr><td align='center'><img src='/_layouts/images/gears_an.gif'/></td></tr></table>";
$(divId).html(waitMessage).SPServices({
  operation: "GetListCollection",
  completefunc: function (xData, Status) {
    var out = $().SPServices.SPDebugXMLHttpResult({
      node: xData.responseXML,
      outputId: divId
    });
    $(divId).html("").append("<b>This is the output from the GetListCollection operation:</b>" + out);
  }
});