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

JavaScript init

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

Loading...

Colors

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

Loading...

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

Font Awesome

Loading...

Delay


Full screen

Loading management - API


Usage

Via classes


        <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


        <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


        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()
getInstance Static method which allows you to get the loading management instance associated to a DOM element. LoadingManagement.getInstance(myLoader)

        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';