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

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


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" />