title: Ajax loader in jquery Tabs
body: <p>I am having a Jquery UI tabs in my page.</p>
  
  <p>I like to show a loader similar to ajax loader while changing the tabs. I refered <a href="https://stackoverflow.com/q/3944482/1716774">this question</a>. But till now i dont have any clear idea for how to make this.</p>
  
  <p>I have tried this in my script like this.</p>
  
  <pre><code> &lt;script&gt;
  $(function() {
  $("#tabs").tabs({
  
      ajaxOptions: {
  
          error: function(xhr, status, index, anchor) {
              $(anchor.hash).html("I tried to load this, but couldn't. Try one of the other links?");
               var spinner = $( ".selector" ).tabs( "option", "spinner" );
               $( ".selector" ).tabs( "option", "spinner", 'Retrieving data...' );
          },
   spinner: '&lt;img src="http://i.stack.imgur.com/Pi5r5.gif" /&gt;'
  
  
      }
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>How to make this in easy way. (I prefer not to use ajax method here.)</p>
  
  <p>Like this image
  <img src="https://i.stack.imgur.com/iEOYZ.gif" alt="enter image description here"></p>