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.



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


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!


Font Awesome



Full screen

Loading management - API


          import { MdbLoadingModule } from 'mdb-angular-ui-kit/loading';
          @NgModule ({
            imports: [MdbLoadingModule],


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