Loading management

React 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...
        
            
          import React, { useRef } from 'react';
          import { MDBLoadingManagement } from 'mdb-react-ui-kit';
  
          export default function App() {
            const basicRef = useRef(null);
            return (
              <div ref={basicRef} style={{ height: '300px', width: '100%' }}>
                <MDBLoadingManagement parentRef={basicRef} />
              </div>
            );
          }
          
        
    

Colors

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

Loading...
        
            
          import React, { useRef } from 'react';
          import { MDBLoadingManagement } from 'mdb-react-ui-kit';
  
          export default function App() {
            const colorsRef = useRef(null);
            return (
              <div ref={colorsRef} style={{ height: '300px', width: '100%' }}>
                <MDBLoadingManagement
                  spinnerClassName='text-success'
                  textClassName='text-success'
                  parentRef={colorsRef}
                  backdropColor='blue'
                  backdropOpacity={0.2}
                />
              </div>
            );
          }
          
        
    

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...
        
            
            import React, { useRef } from 'react';
            import { MDBLoadingManagement } from 'mdb-react-ui-kit';
    
            export default function App() {
              const customRef = useRef(null);
              return (
                <div ref={customRef} style={{ height: '300px', width: '100%' }}>
                  <MDBLoadingManagement parentRef={customRef} icon='spinner-grow' />
                </div>
              );
            }
          
        
    

Font Awesome

Loading...
        
            
            import React, { useRef } from 'react';
            import { MDBLoadingManagement } from 'mdb-react-ui-kit';
    
            export default function App() {
              const fontRef = useRef(null);
              return (
                <div ref={fontRef} style={{ height: '300px', width: '100%' }}>
                  <MDBLoadingManagement parentRef={fontRef} icon='fas fa-spinner fa-spin fa-2x' />
                </div>
              );
            }
          
        
    

Delay

        
            
            import React, { useEffect, useState } from 'react';
            import { MDBLoadingManagement, MDBSwitch } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [delay, setDelay] = useState(false);
              const [switchValue, setSwitchValue] = useState(false);
              const [counter, setCounter] = useState(4);

              useEffect(() => {
                if (switchValue && !delay) {
                  const timer = setTimeout(() => {
                    if (counter > 0) {
                      setCounter(counter - 1);
                    }
                    if (counter === 0) {
                      setDelay(true);
                      setCounter(4);
                    }
                  }, 1000);
            
                  return () => clearTimeout(timer);
                }
              }, [switchValue, counter, delay]);
            
              useEffect(() => {
                if (delay) {
                  setTimeout(() => {
                    setDelay(false);
                  }, 3000);
                }
              }, [delay]);

              return (
                <>
                  {switchValue && (
                    <div className='test-counter h2 d-flex justify-content-center align-items-center'>{counter}</div>
                  )}
                  <MDBSwitch
                    value={switchValue}
                    onChange={() => {
                      setCounter(4);
                      setSwitchValue(!switchValue);
                    }}
                    label='Switch Delay'
                  />
                  <MDBLoadingManagement isOpen={delay} overflow={false} fullScreen />
                </>
              );
            }
          
        
    

Full screen

        
            
            import React, { useEffect, useState } from 'react';
            import { MDBLoadingManagement, MDBBtn } from 'mdb-react-ui-kit';

            export default function App() {
              const [fullscreen, setFullscreen] = useState(false);

              useEffect(() => {
                if (fullscreen) {
                  setTimeout(() => {
                    setFullscreen(false);
                  }, 5000);
                }
              }, [fullscreen]);

              return (
                <>
                  <MDBBtn onClick={() => setFullscreen(true)}>FULL SCREEN</MDBBtn>
                  <MDBLoadingManagement isOpen={fullscreen} fullScreen />
                </>
              );
            }
          
        
    

Loading management - API


Import

        
            
          import { MDBLoadingManagement } from 'mdb-react-ui-kit';
        
        
    

Properties

MDBLoadingManagement

Name Type Default Description Example
backdrop boolean true Set loader backdrop/td> <MDBLoadingManagement backdrop={false} />
backdropColor string rgba(0, 0, 0) Set loader backdrop color <MDBLoadingManagement backdropColor="red" />
backdropOpacity number 0.4 Set loader backdrop opacity <MDBLoadingManagement backdropOpacity={0.2} />
className string '' Add custom class to MDBLoadingManagement <MDBLoadingManagement className="class" />
icon string 'spinner-border' Set loading icon to loader <MDBLoadingManagement icon="custom-icon" />
loadingText string Loading... Set text to loader <MDBLoadingManagement loadingText="In progress" />
isOpen boolean true Open state of the show loader <MDBLoadingManagement isOpen={openState} />
fullScreen fullScreen false Set backdrop fullscreen <MDBLoadingManagement fullScreen />
parentRef null null Set parent of loader <MDBLoadingManagement parentRef={parent} />
overflow boolean true Set overflow='none' to backdrop <MDBLoadingManagement overflow={false} />
spinnerClassName string '' Add custom class to MDBLoadingManagement <MDBLoadingManagement spinnerClassName="class" />
textClassName string '' Add custom class to MDBLoadingManagement text <MDBLoadingManagement textClassName="class" />