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'.

Contact Us

Address: 22a Fishergate York, YO10 4AB · Tel: 01904 636677 · Email: info@dotadmin.com