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

Required ES init: Loading *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

Loading is automatically initialized on page load if you add the data-mdb-loading-init attribute to your element. By default, Loading attaches to the body element. If you want to attach Loading to a specific element, you need to add data-mdb-parent-selector with the class or ID of your parent. Alternatively, you can achieve this via JavaScript using the parentSelector option.

Loading...
Edit in sandbox 
        
            
              <div id="loading-test" style="height: 300px; width: 100%;">
                <div data-mdb-loading-init data-mdb-parent-selector="#loading-test">
                  <div class="spinner-border loading-icon" role="status"></div>
                  <span class="loading-text">Loading...</span>
                </div>
              </div>
            
        
    
        
            
              // Initialization for ES Users
              import { Loading, initMDB } from "mdb-ui-kit";
              
              initMDB({ Loading });

JavaScript init

You can initialize the Loading component in JavaScript using the constructor: new Loading(element, options).

Loading...
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>
            
        
    
        
            
              import { Loading, initMDB } from "mdb-ui-kit";

              const loadingmdb = document.querySelector('.loading-mdb');

              const newloading = new Loading(loadingmdb, {
                parentSelector: '#loading-test-1'
              });
            
        
    
        
            
              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 color utilities for example .text-primary.

Loading...
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>
            
        
    
        
            
              import { Loading, initMDB } from "mdb-ui-kit";

              const loadingColors = document.querySelector('.loading-colors');

              const newloading = new Loading(loadingColors, {
                parentSelector: '#loading-test-2'
              }); 
            
        
    
        
            
              const loadingColors = document.querySelector('.loading-colors');

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

Custom spinners

MDB Growing spinner

You have the option to select the grow spinner instead of the border spinner. While it does not perform a literal rotation, it consistently alternates between expansion and contraction.

Loading...
Edit in sandbox 
        
            
                <div id="loading-test-4" style="height: 300px; width: 100%">
                  <div data-mdb-loading-init data-mdb-parent-selector="#loading-test-4">
                    <div class="spinner-grow loading-icon" role="status"></div>
                    <span class="loading-text">Loading...</span>
                  </div>
                </div>
              
        
    
        
            
                // Initialization for ES Users
                import { Loading, initMDB } from "mdb-ui-kit";
                
                initMDB({ Loading });

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 data-mdb-loading-init 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>
              
        
    
        
            
                // Initialization for ES Users
                import { Loading, initMDB } from "mdb-ui-kit";
                
                initMDB({ Loading });

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>
              
        
    
        
            
                import { Loading, initMDB } from "mdb-ui-kit";

                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 Loading(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;
                  }
                });
              
        
    
        
            
                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.Loading(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" data-mdb-ripple-init id="btn-full-screen">Full screen</button>
                </div>
              
        
    
        
            
                import { Loading, Ripple, initMDB } from "mdb-ui-kit";
                
                initMDB({ Ripple });

                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 Loading(loadingFull, {
                    scroll: false,
                    backdropID: 'full-backdrop'
                  });

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

              
        
    
        
            
                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

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
        
            
            import { Loading, initMDB } from "mdb-ui-kit";
            initMDB({ Loading });
          
        
    
        
            
            import 'mdb-ui-kit';

Usage

Via data attributes

Using the Datatable method doesn't require any additional JavaScript code - simply add data-mdb-loading-init attribute to .loading-icon parent element and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

Edit in sandbox 
        
            
            <div id="loading-test" style="height: 300px; width: 100%">
              <div data-mdb-loading-init 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 Loading(document.getElementById('myLoader'), options);
          
        
    
        
            
            const myLoader = new mdb.Loading(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 
        
            
        $(document).ready(() => {
          $('.example-class').loading(options);
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-backdrop="".

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 string '' Set loader backdrop ID
delay null null Set deley to show loader
loader string '' Set ID of loader
parentSelector string | 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
dispose Removes an instance of the loading management LoadingManagement.dispose()
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 = Loading.getInstance(myLoader);
          
        
    
        
            
            const myLoader = document.getElementById('myLoaderID');
            const loader = mdb.Loading.getInstance(myLoader);