Loading management

Angular 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 set [show] input to true. Loader will take all available space of its container. If you don't use fullscreen loader and want to attach loader to a container, use [container] and specify parent element for mdb-loading component.

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 { MdbLoadingModule } from 'mdb-angular-ui-kit/loading';
          …
          @NgModule ({
            ...
            imports: [MdbLoadingModule],
            ...
          })
        

Inputs

Name Type Default Description
backdrop boolean true Whether loader backdrop should be displayed
backdropClass string - Defines custom backdrop class
container HTMLElement - Defines parent container of the loader component
fullscreen boolean false Whether fullscreen loader should be displayed