Bootstrap Tutorial - Delay tab loading








The following code shows how to delay tab loading.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript"
  src="http://code.jquery.com/jquery.min.js"></script>
<script
  src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ <!--from   ww w .j  a  v  a  2  s  . c om-->
    $(".nav-tabs a").click(function(){
        $(this).button('loading').delay(500).queue(function(){
            $(this).button('reset');
            $(this).dequeue();
        });        
    });
});
</script>
<style type="text/css">
.nav a {
  outline: none;
}

.bs-example {
  margin: 20px;
}
</style>
</head>
<body>
  <div class="bs-example">
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1"
          data-loading-text="Loading...">Section 1</a></li>
        <li><a data-toggle="tab" href="#tab2"
          data-loading-text="Loading...">Section 2</a></li>
        <li><a data-toggle="tab" href="#tab3"
          data-loading-text="Loading...">Section 3</a></li>
      </ul>
      <div class="tab-content">
        <div id="tab1" class="tab-pane active fade in">
          <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis
            cardigan american apparel, butcher voluptate nisi qui. Raw denim
            you probably haven't heard of them jean shorts Austin. Nesciunt
            tofu stumptown aliqua, retro synth master cleanse. Mustache cliche
            tempor, williamsburg carles vegan helvetica. Reprehenderit butcher
            retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi.</p>
        </div>
        <div id="tab2" class="tab-pane fade">
          <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
            Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
            porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
            hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
            volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
            facilisis leo at faucibus adipiscing. Duis auctor dictum erat
            hendrerit dapibus.</p>
        </div>
        <div id="tab3" class="tab-pane fade">
          <p>WInteger convallis, nulla in</p>
                </div>
             </div>
         </div>
     </div>
</body> 
</html>

Click to view the demo