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 different 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 color='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}
                    spinnerElement={<MDBSpinner className='loading-icon' grow role='status' />}
                  />
                </div>
              );
            }

Font Awesome

Use font awesome spinner icon to indicate loading status.

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
                    spinnerElement={<MDBIcon className='loading-icon' fas icon='spinner' size='2x' spin />}
                    parentRef={fontRef}
                  />
                </div>
              );
            }

Delay

Use following code to delay the appearance of loading spinner.

        
            
            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

Use the code below to add spinner for larger content areas or for full-screen loading.

        
            
            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" />
color 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'light' | 'dark' | 'muted' | 'white' | 'info' '' Change color of the text <MDBLoadingManagement color="secondary" />
loadingText React.ReactNode Loading... Set text to loader <MDBLoadingManagement loadingText="In progress" />
isOpen boolean true Open state of the show loader <MDBLoadingManagement isOpen={openState} />
fullScreen boolean false Set backdrop fullscreen <MDBLoadingManagement fullScreen />
overflow boolean true Set overflow='none' to backdrop <MDBLoadingManagement overflow={false} />
parentRef React.RefObject null Reference to parent element <MDBLoadingManagement parentRef={parent} />
ref React.RefObject null Reference to the element <MDBLoadingManagement ref={reference} />
spinnerElement React.ReactNode '' Change the spinner element <MDBLoadingManagement spinnerElement={customSpinner} />
textClassName string '' Add custom class to MDBLoadingManagement text <MDBLoadingManagement textClassName="class" />
textStyles React.CSSProperties undefined Add custom styles to MDBLoadingManagement text <MDBLoadingManagement textStyles={{color: 'red'}} />