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.

JavaScript init

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

Colors

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

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!

Font Awesome

Delay

Switch Delay

HTML
JavaScript


            <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

Loading management - API

Usage

Via classes

HTML


        <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

HTML


        <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

JavaScript


        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.

jQuery


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

JavaScript


        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:

JavaScript


        import { Loading } from 'mdb-ui-kit';