How can I load Bootstrap tabs content?

Question

I want to add a loading spinner in bootstrap tabs while clicking on tab pane link it display a loading spinner few seconds after that the tab content will displayed.

HTML:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <div class="d-flex justify-content-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div>Active Tab Pane</div>
  </div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <div class="d-flex justify-content-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div>Tab Pane</div>
  </div>
</div>

JavaScript:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
    var tabTrigger = new bootstrap.Tab(triggerEl)
    triggerEl.addEventListener('shown.bs.tab', function (event) {
        event.preventDefault();
        tabTrigger.show();
        // alert('Hello World');
    })
});

Answer 1

You can use setTimeout method to show your spinner for some seconds and then show actual content.

Demo Code :

 call_to_show() //on load..call var tabEl = document.querySelectorAll('a[data-bs-toggle="tab"]') Array.from(tabEl).forEach(link => { link.addEventListener('shown.bs.tab', function(event) { call_to_show(); }) }) function call_to_show() { //get spinner and actual content where class is active var spinner = document.querySelector('.tab-pane.active.spinner-border') var content = document.querySelector('.tab-pane.active.actual_content') //show sppinner spinner.style.display = "block"; content.style.display = "none"; setTimeout(function() { //hide spinner spinner.style.display = "none"; content.style.display = "block"; }, 1000); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab"> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> <div class="actual_content">Active Tab Pane</div> </div> <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> <div class="actual_content">Tab Pane</div> </div> </div>