Problem adding loading animation to tab panel

August 18, 2022

I am trying to add animation after clicking tab panel in Bootstrap.
When adding the loading animation to the tab panel, it works fine only in the first tab panel. In the latter, dual ring appears, but the opacity does not fully work. Where am I going wrong in the javascript code?

JSFiddle

const tabPane = document.querySelector(".tab-pane");
const dualRing = document.querySelector(".lds-dual-ring");
const tabs = [...document.querySelectorAll('[data-bs-toggle="tab"]')];

for (let tab of tabs) {
  tab &&
    tab.addEventListener("click", () => {
      tabPane.classList.add("loading");
      dualRing.classList.add("loading");
      setTimeout(() => {
        tabPane.classList.remove("loading");
        dualRing.classList.remove("loading");
      }, 500);
    });
}

>Solution :

Here is the corrected fiddle : https://jsfiddle.net/lk77/76fqr4ke/1/

const dualRing = document.querySelector(".lds-dual-ring");
const tabs = [...document.querySelectorAll('[data-bs-toggle="tab"]')];

for (let tab of tabs) {
  tab &&
    tab.addEventListener("click", () => {
      let tabPane = document.querySelector(".tab-pane.active");
      tabPane.classList.add("loading");
      dualRing.classList.add("loading");
      setTimeout(() => {
        tabPane.classList.remove("loading");
        dualRing.classList.remove("loading");
      }, 500);
    });
}

you need to recover the active tab pane