Ajax requests should display a spinner to provide visual feedback to the user that something is happening while we wait for the request to return.

For the sake of UI consistency a helper class exists which should always be used in preference to creating your own spinner.

Example usage:

var spinner; 
function doSomethingAjaxy() { 
  if(!spinner) { 
    spinner = new daspinner(); 
  } 
  spinner.spin("search-results"); 
  $.ajax("/search/", { 
    success : function() { 
      spinner.stop(); 
    }; 
  }; 
}

The spin function takes two arguments, the first being the destination element for the spinner.  This can be either a DOM element, a jQuery object, or simply the destination element's ID as a string.

The second argument is optional and allows us to specify a background and size for the spinner.

spinner.spin("search-results", {bgColor:"dark", size:"large"});

Valid background colours are 'dark', 'light' or 'transparent' (default).

Valid sizes are 'large', 'medium' (default) or 'small'.