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