Jquery Ajax and Spinner

Question

At this demo site, I'm sorting the posts using ajax and the Tumblr API. Everything works perfectly, with efficient error handling but seeing as I'm very new to jQuery I was wondering how/where/what I should do to show a spinner while the content is being loaded?

Here's the code I'm using to load the posts:

function byCategory(postType, callback) {
    jQuery.ajax({
     type: "GET",
     url: '{URL}/api/read/json?type=' + postType + 
      '&callback=?',
     dataType: "json",
     success: function(results){
        console.info("Success!");
        yourCallbackToRunIfSuccessful(results);
     },

 error: function(XMLHttpRequest, textStatus, errorThrown){
     console.info("Error, the Tumblr API is down and cannot serve your request");
     yourErrorHandler(XMLHttpRequest, textStatus, errorThrown);
     }
    });

Any help from the ninja's out there will be greatly appreciated :)

Answer 1

Do a $('#spinner').show() on button click or submit when you trigger the function (just put it after the start of the function, above the ajax call)

In the success, simply do a $('#spinner').hide();