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. 

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

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

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

<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