Showing spinner between Bootstrap tabs when loading content with ajax

Question

I am using bootstrap 3 tabs and using ajax to load the content of each tab on tabbed.

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.

First of all, is there a built-in easy option to achieve this?( Fade effect is not what I am looking for.)

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?

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?

What would be the best option?

  <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home"> <div class="spinner"></div> </div>
  <div class="tab-pane" id="profile"><div class="spinner"></div></div>
  <div class="tab-pane" id="messages"><div class="spinner"></div></div>
</div>

Here is the ajax query to update content of each tab

$('.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) {

        });
    });

Answer 1

As yo are using jQuery.load, you can modify your code like this:

First add a loading div to the page. I usually do something like this:

<div class="loading">
    <img src="/images/loading.gif" />
    <div>Loading</div>
</div>

Give it some CSS to float it to the middle of the screen, style it and initially hide it:

.loading {
    display: none;
    position: fixed;
    top: 350px;
    left: 50%;
    margin-top: -96px;
    margin-left: -96px;
    background-color: #ccc;
    opacity: .85;
    border-radius: 25px;
    width: 192px;
    height: 192px;
    z-index: 99999;
}

Then modify your ajax Javascript:

$('.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();

    //Show the loader
    $(".loading").show();

    $(href).load(tabUrlAddress, function (result) {
        //Hide when complete
        $(".loading").hide();
    });
});