Loading management

Bootstrap 5 Loading management

Displays animation in a container (such as a table) while loading data.

Note: Read the API tab to find all available options and advanced customization

Basic example

Loading automatically init when you add class loading to your element. Loading automatically attach to body element, so if you want attach loading to element you have add data-mdb-parent-selector with class or id of your parent or by javascript with parentSelector option.

Loading...
Edit in sandbox 
<div id="loading-test" style="height: 300px; width: 100%;">
  <div class="loading" data-mdb-parent-selector="#loading-test">
    <div class="spinner-border loading-icon" role="status"></div>
    <span class="loading-text">Loading...</span>
  </div>
</div>

JavaScript init

You can init loading component with JavaScript with new Loading(element, options).

Edit in sandbox 
<div id="loading-test-1" style="height: 300px; width: 100%">
  <div class="loading-mdb">
    <div class="spinner-border loading-icon" role="status"></div>
    <span class="loading-text">Loading...</span>
  </div>
</div>
const loadingmdb = document.querySelector('.loading-mdb');

const newloading = new mdb.Loading(loadingmdb, {
  parentSelector: '#loading-test-1'
});

Colors

You can set a different colors to loader with text-* color like primary, success, danger, warning.

Edit in sandbox 
<div id="loading-test-2" style="height: 300px; width: 100%">
  <div class="loading-colors">
    <div class="spinner-border loading-icon text-success" role="status"></div>
    <span class="loading-text text-success">Loading...</span>
  </div>
</div>
const loadingmdb = document.querySelector('.loading-mdb');

const newloading = new mdb.Loading(loadingmdb, {
  parentSelector: '#loading-test-1'
});

Custom spinners

MDB Growing spinner

If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!

Loading...
Edit in sandbox 
<div id="loading-test-4" style="height: 300px; width: 100%">
  <div class="loading" data-mdb-parent-selector="#loading-test-4">
    <div class="spinner-grow loading-icon" role="status"></div>
    <span class="loading-text">Loading...</span>
  </div>
</div>

Font Awesome

Use font awesome spinner icon to indicate loading status.

Loading...
Edit in sandbox 
<div id="loading-test-5" style="height: 300px; width: 100%">
  <div class="loading" data-mdb-parent-selector="#loading-test-5">
    <div class="fas fa-spinner fa-spin fa-2x loading-icon"></div>
    <span class="loading-text">Loading...</span>
  </div>
</div>

Delay

Use following code to delay the appearance of loading spinner.

Edit in sandbox 
<div id="test">
  <div class="test-counter"></div>
  <div class="form-check form-switch my-3">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
    <label class="form-check-label" for="flexSwitchCheckDefault">Switch Delay</label>
  </div>
</div>
const loader = `
  <div id="loading-test-6" style="height: 300px; width: 100%">
    <div class="loading-delay">
      <div class="spinner-border loading-icon text-succes"></div><span class="loading-text">Loading...</span>
    </div>
  </div>
`;

const loader = `
  <div id="loading-test-6" style="height: 300px; width: 100%">
    <div class="loading-delay">
      <div class="spinner-border loading-icon text-succes"></div>
        <span class="loading-text">Loading...</span>
      </div>
  </div>
`;

const loader1 = `
  <div class="loading-full">
    <div class="spinner-border loading-icon text-succes"></div>
    <span class="loading-text">Loading...</span>
  </div>
`;

const switches = document.querySelector('#flexSwitchCheckDefault');

let timeleft = 4;

switches.addEventListener('change', (e) => {
  const test = document.querySelector('#test');

  if (e.target.checked) {
    test.insertAdjacentHTML('beforeend', loader);
    const loadingDelay = document.querySelector('.loading-delay');
    const test1 = document.querySelector('.test-counter');

    const downloadTimer = setInterval(function () {
      test1.classList.add('h2', 'd-flex', 'justify-content-center', 'align-items-center');
      if (timeleft <= 0) {
        clearInterval(downloadTimer);
        timeleft = 4;
      }
      test1.innerHTML = timeleft;

      timeleft -= 1;
    }, 1000);

    new mdb.LoadingManagement(loadingDelay, {
      delay: 5000,
      backdropID: 'delay-backdrop',
    });

    setTimeout(() => {
      const backdrop = document.querySelector('#delay-backdrop');

      backdrop.remove();
      loadingDelay.remove();
      document.body.style.overflow = '';
    }, 8000);

  } else {
    const loadingDelay = document.querySelector('#loading-test-6');

    loadingDelay.remove();

    document.querySelector('.test-counter').innerHTML = 0;
  }
});

Full screen

Use the code below to add spinner for larger content areas or for full-screen loading.

Edit in sandbox 
<div id="test-full">
  <button class="btn btn-primary" id="btn-full-screen">Full screen</button>
</div>
const loader1 = `
  <div class="loading-full">
    <div class="spinner-border loading-icon text-succes"></div>
    <span class="loading-text">Loading...</span>
  </div>
`;

const btnfull = document.querySelector('#btn-full-screen');

btnfull.addEventListener('click', () => {
  const test2 = document.querySelector('#test-full');
  test2.insertAdjacentHTML('beforeend', loader1);

  const loadingFull = document.querySelector('.loading-full');

  const loading = new mdb.Loading(loadingFull, {
    scroll: false,
    backdropID: 'full-backdrop'
  });

  setTimeout(() => {
    const backdrop = document.querySelector('#full-backdrop');
    backdrop.remove();
    loadingFull.remove();
    document.body.style.overflow = ''
  }, 5000);
});

Loading management - API

Usage

Via classes

Edit in sandbox 
<div id="loading-test" style="height: 300px; width: 100%">
  <div class="loading" data-mdb-parent-selector="#loading-test">
    <div class="spinner-border loading-icon" role="status"></div>
    <span class="loading-text">Loading...</span>
  </div>
</div>

Via data attributes

Edit in sandbox 
<div id="loading-test" style="height: 300px; width: 100%">
  <div class="loading" data-mdb-parent-selector="#loading-test" data-mdb-delay="500" data-mdb-backdrop="false">
    <div class="spinner-border loading-icon" role="status"></div>
    <span class="loading-text">Loading...</span>
  </div>
</div>

Via JavaScript

Edit in sandbox 
const myLoader = new mdb.LoadingManagement(document.getElementById('myLoader'), options);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
$('.example-class').loading(options);

Options

Name Type Default Description
backdrop null || boolean true Set loader backdrop/td>
backdropColor string rgba(0, 0, 0) Set loader backdrop color
backdropOpacity number || string 0.4 Set loader backdrop opacity
backdropID null || number '' Set loader backdrop ID
delay null null Set deley to show loader
loader string '' Set ID of loader
parentSelector null null Set parent of loader. It can be every element with class or id
scroll boolean true Set scroll to backdrop
loadingText boolean true Set text to loader
loadingIcon boolean true Set loading icon to lader

Methods

Name Description Example
toggle Manually toggles a loader myLoader.toggle()
getInstance Static method which allows you to get the loading management instance associated to a DOM element. LoadingManagement.getInstance(myLoader)
getOrCreateInstance Static method which returns the loading management instance associated to a DOM element or create a new one in case it wasn't initialized. LoadingManagement.getOrCreateInstance(myLoader)
Edit in sandbox 
const myLoader = document.getElementById('myLoaderID');
const loader = new mdb.LoadingManagement(myLoader);
loader.toggle();

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
import { Loading } from 'mdb-ui-kit';