Add a spinner loader in between

Question

in between the steps I'd like to add a spinner (just a message Loading for now) is it possible?

Perhaps something like this?

$('#loader').show();
   $.ajax({
      success: function(data) {

      //Hide the progress div if loading data is done
      $('#loader').hide();
      }
   });

JS CODE OF MY DEMO:

var prevLink = '<button class="button cancel" type="button">Cancel</button>';
var nextLink = '<button class="button continue" type="button">Confirm purchase</button>';
var navHTML = '<div class="buttons">' + prevLink + nextLink + '</div>';
var FormData = [];

$(function() {
  $('#stepbystep > fieldset').hide().append(navHTML);
  $('#first-step .cancel').remove();
  $('#last-step .continue').remove();

  $('#first-step').fadeIn();
  setHeight();

  $('button.continue').click(function() {
      var whichStep = $(this).parent().parent().attr('id');            
      if (whichStep == 'first-step') {               
      } else if (whichStep == 'second-step')    {
      } else if (whichStep == 'third-step')     {
      } else if (whichStep == 'fourth-step')    { 
      } else if (whichStep == 'last-step')      {
      }
      $(this).parent().parent().hide(300).next().show(300);
      setHeight();
  });
  $('button.cancel').click(function() {
      $(this).parent().parent().fadeOut(300).prev().fadeIn(300);
  });
})

FIXED DEMO:

http://jsfiddle.net/59fNR/2/

Answer 1

You can register a function to run on the start and stop of every jQuery ajax call, like this:

$(document).ajaxStart(function () {
    $("#loading").show();
}).ajaxStop(function () {
    $("#loading").hide();
});

Then you don't have to do anything on each actual ajax request, it'll automatically run. Just change #loading to whatever the id of your loader element is.