title: Showing spinner between Bootstrap tabs when loading content with ajax
body: <p>I am using bootstrap 3 tabs and using ajax to load the content of each tab on tabbed.</p>
  
  <p>But sometimes it takes time to load up the content when the server gets slower. Therefore, I would like to put a spinner in the tab content until the server returns the tab content back.</p>
  
  <p>First of all, is there a built-in easy option to achieve this?( Fade effect is not what I am looking for.)</p>
  
  <p>If there is not an built-in function to use should I just place a div inside the content and hide/show it when the ajax returns result back?</p>
  
  <p>Or I should not repeat myself and I should use jquery to place the div element in the active tab and replace it when the ajax done?</p>
  
  <p>What would be the best option?</p>
  
  <pre><code>  &lt;!-- Nav tabs --&gt;
  &lt;ul class="nav nav-tabs" role="tablist"&gt;
    &lt;li class="active"&gt;&lt;a href="#home" role="tab" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#profile" role="tab" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#messages" role="tab" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Tab panes --&gt;
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="home"&gt; &lt;div class="spinner"&gt;&lt;/div&gt; &lt;/div&gt;
    &lt;div class="tab-pane" id="profile"&gt;&lt;div class="spinner"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div class="tab-pane" id="messages"&gt;&lt;div class="spinner"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the ajax query to update content of each tab</p>
  
  <pre><code>$('.nav-tabs a').click(function (e) {
          e.preventDefault();
          if ($(this).closest('li').is('.active')) { //stop sending another query when tab active
              return;
          }
  
          var ts = +new Date();
          var tabUrlAddress = $(this).attr("data-url") + '?timestamp=' + ts;
          var href = this.hash;
          var pane = $(this);
          pane.show();
  
          $(href).load(tabUrlAddress, function (result) {
  
          });
      });
  </code></pre>