Loading Management

Loading Management - Bootstrap 5 & Material Design 2.0 component

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 automattilcy init when you add class loading to your element. Loading automattilcy 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).


                      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.


                      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!

Font Awesome

Delay

Switch Delay


                        
                          
                          
                            
                            Switch Delay


                        const loader = `
                          
                            
Loading...
                          
                        ";

                        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, }); } else { const
                          loadingDelay=document.querySelector('#loading-test-6'); loadingDelay.remove();
                          document.querySelector('.test-counter').innerHTML=0; } });

Full screen


                          const loader1 = `
                            
                            Loading...
                          `;

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

Usage

Via classes

Via data attributes

Via JavaScript


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


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


                    var myLoader = document.getElementById('myLoaderID')
                    var loader = new mdb.Loading(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';