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 parentRef property with a reference to your parent. 

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%", zIndex: "1029" }}>
      <MDBLoadingManagement parentRef={basicRef} />
    </div>
  );
}

Colors

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

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%", zIndex: "1029" }}>
      <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! 

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%", zIndex: "1029" }}>
      <MDBLoadingManagement
        parentRef={customRef}
        spinnerElement={<MDBSpinner className='loading-icon' grow role='status' />}
      />
    </div>
  );
}

Font Awesome

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%", zIndex: "1029" }}>
      <MDBLoadingManagement
        spinnerElement={<MDBIcon className='loading-icon' fas icon='spinner' size='2x' spin />}
        parentRef={fontRef}
      />
    </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} />
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'}} />