Loading management MDB Pro component

Loading management - Bootstrap 5 & Material Design 2.0

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-parent-selector with class or id of your parent or by javascript with parentSelector option.

Loading...

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

JavaScript init

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

Loading...

          <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 diffrent colors to loader with text-* color like primary, success, danger, warning.

Loading...

          <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...

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

Font Awesome

Loading...

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

Delay


            <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

<button class="btn btn-primary" id="btn-full-screen">Full screen</button>
          

            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


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

Via data attributes


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

Via 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.


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

        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:


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