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... 
        
            
            <div style="height: 300px; width: 100%; z-index: 1029" #container>
              <mdb-loading [show]="true" [container]="container">
                <div class="loading-spinner">
                  <div class="spinner-border loading-icon" role="status"></div>
                  <span class="loading-text">Loading...</span>
                </div>
              </mdb-loading>
            </div>

Colors

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

Loading... 
        
            
            <div style="height: 300px; width: 100%; z-index: 1029" #container>
              <mdb-loading [show]="true" [container]="container">
                <div class="loading-spinner">
                  <div class="spinner-border loading-icon text-success" role="status"></div>
                  <span class="loading-text text-success">Loading...</span>
                </div>
              </mdb-loading>
            </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... 
        
            
              <div
                style="height: 300px; width: 100%; z-index: 1029"
                #container
              >
                <mdb-loading [show]="true" [container]="container">
                  <div class="loading-spinner">
                    <div class="spinner-grow loading-icon" role="status"></div>
                    <span class="loading-text">Loading...</span>
                  </div>
                </mdb-loading>
              </div>

Font Awesome

Use font awesome spinner icon to indicate loading status.

Loading... 
        
            
              <div style="height: 300px; width: 100%; z-index: 1029" #container>
                <mdb-loading [show]="true" [container]="container">
                  <div class="loading-spinner">
                    <div class="fas fa-spinner fa-spin fa-2x loading-icon"></div>
                    <span class="loading-text">Loading...</span>
                  </div>
                </mdb-loading>
              </div>

Delay

Use following code to delay the appearance of loading spinner.

        
            
              <div>
                <div class="h2 d-flex justify-content-center" *ngIf="showTimer">{{ time }}</div>
                <div class="form-check form-switch my-3">
                  <input
                    mdbCheckbox
                    (checkboxChange)="onChange()"
                    class="form-check-input"
                    type="checkbox"
                    id="flexSwitchCheckDefault"
                  />
                  <label class="form-check-label" for="flexSwitchCheckDefault">Switch Delay</label>
                </div>
                <mdb-loading [show]="show" [fullscreen]="true">
                  <div class="loading-spinner">
                    <div class="spinner-border loading-icon" role="status"></div>
                    <span class="loading-text">Loading...</span>
                  </div>
                </mdb-loading>
              </div>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'app-loading-management',
                templateUrl: './loading-management.component.html',
                styleUrls: ['./loading-management.component.scss'],
              })
              export class LoadingManagementComponent {
                show = false;
                showTimer = false;
                time = 4;

                constructor() {}

                onChange() {
                  this.showTimer = true;
                  const delayTimer = setInterval(() => {
                    if (this.time <= 1) {
                      clearInterval(delayTimer);
                      this.show = true;
                      setTimeout(() => {
                        this.show = false;
                      }, 5000);
                    }
                    this.time -= 1;
                  }, 1000);
                }
              }

Full screen

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

        
            
              <div>
                <button class="btn btn-primary" id="btn-full-screen" (click)="showLoader()">
                  Full screen
                </button>
              </div>
              <mdb-loading [show]="show" [fullscreen]="true">
                <div class="loading-spinner">
                  <div class="spinner-border loading-icon" role="status"></div>
                  <span class="loading-text">Loading...</span>
                </div>
              </mdb-loading>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'app-loading-management',
                templateUrl: './loading-management.component.html',
                styleUrls: ['./loading-management.component.scss'],
              })
              export class LoadingManagementComponent {
                show = false;

                constructor() {}

                showLoader(): void {
                  this.show = true;
                  setTimeout(() => {
                    this.show = false;
                  }, 5000);
                }
              }

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