Rate this docs

Angular Bootstrap loaders

Angular Loaders - Bootstrap 4 & Material Design

Angular Bootstrap loaders are components which are visible while loading a page, a form, or an element. Their UX value is incredibly high, because they inform the user what is currently happening on the page.

Below you will find some examples of preloaders.


Infinite loading MDB Pro component


        <mdb-progress-bar class="progress primary-color-dark" mode="indeterminate"></mdb-progress-bar>
      

Circles MDB Pro component


        <!--Big blue-->
        <mdb-spinner spinnerType="big" spinnerColor="blue"></mdb-spinner>

        <!--Medium red-->
        <mdb-spinner spinnerColor="red"></mdb-spinner>

        <!--Small yellow-->
        <mdb-spinner spinnerType="small" spinnerColor="yellow"></mdb-spinner>
      

Multicolor circles MDB Pro component


        <mdb-spinner spinnerType="big"></mdb-spinner>
      

Angular Loaders - API

In this section you will find informations about required modules and available inputs of loaders component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
import { WavesModule, PreloadersModule } from 'ng-uikit-pro-standard'

Components

ProgressSpinnerComponent

Selector: mdb-spinner

Type: ProgressSpinnerComponent


Inputs

ProgressSpinnerComponent
Name Type Default Description Example
spinnerType string ' ' Allow to set size of a spinner. Values are big and small. spinnerType="small"
spinnerColor string rainbow Allow to set color of a spinner. Values are green, blue, yellow, red, rainbow. spinnerColor="red"

Below classes can be used in spinner loader component (circles).

Name Type Usage
.spinner-blue color class <div class="spinner-layer spinner-blue"></div>
.spinner-red color class <div class="spinner-layer spinner-red"></div>
.spinner-yellow color class <div class="spinner-layer spinner-yellow"></div>
.spinner-green color class <div class="spinner-layer spinner-green"></div>
.spinner-primary-color color class <div class="spinner-layer spinner-primary-color"></div>
.*-only color class prefix <div class="spinner-layer spinner-primary-color-only"></div>
.small size class <div class="preloader-wrapper small active"></div>
(blank) - default size size class <div class="preloader-wrapper active"></div>
.big size class <div class="preloader-wrapper big active"></div>

Angular Loader - examples & customization

Examples of using preloaders in real cases.


Preloader with application version checking MDB Pro component

Simple example showing, how could you use our preloaders in your real application.


        <div class="row">
          <div class="col-12">
            <div class="my-5" *ngIf="!visible">
              <h3 class="h3-responsive text-center">Your version is up to date.</h3>
              <h5 class="h5responsive text-center">Last update check on:
                {{today}}
              </h5>
            </div>

            <div class="view" *ngIf="visible" style="height:100vh; width:100vw; position:fixed; top:0; left:0; z-index:999">
              <div class="mask rgba-black-strong flex-center">
                <p class="white-text">Comparing versions...</p>
                <br>
                <mdb-spinner spinnerType="big"></mdb-spinner>
              </div>
            </div>
          </div>
        </div>
      

        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'preloader-usage',
        templateUrl: './preloader-usage.component.html',
        styleUrls: ['./preloader-usage.component.scss']
        })
        export class PreloaderUsageComponent implements OnInit {
        visible: boolean = true;
        date = new Date();
        today = this.date.getDate() + '/' + (this.date.getMonth() + 1) + '/' + this.date.getFullYear();

        ngOnInit() {
        setTimeout(() => {
        this.visible = false;
        }, 3000);

        }
        }
      

Preloading script MDB Pro component

An example showing how to use the preloader in the ngOnInit cycle.

Usage

Adding preloader to your project


In order to have working preloaders on every component in your project, you need to perform those 3 steps:

  1. Add MDBSpinningPreloader to app.module.ts,
  2. Configure your app.component.ts file by adding MDBSpinningPreloader service to it,
  3. Add preloader HTML markup to index.html file between <body></body> tags, above main component (default <app-root></app-root>).

1st step - app.module.ts

import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';

@NgModule({
...
providers: [MDBSpinningPreloader],
...
})

  
2nd step - app.component.ts

import { Component, OnInit } from '@angular/core';
import {MDBSpinningPreloader} from 'ng-uikit-pro-standard';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {
  constructor(private mdbSpinningPreloader: MDBSpinningPreloader) {}

  ngOnInit() {
    this.mdbSpinningPreloader.stop();
  }
}
  
3rd step - index.html

<div class="spinning-preloader-container">
<div class="preloader-wrapper big active">

<div class="spinner-layer spinner-blue">
  <div class="circle-clipper left">
    <div class="circle"> </div>
  </div> <div class="gap-patch">
    <div class="circle"> </div>
  </div>
</div>

<div class="spinner-layer spinner-red">
  <div class="circle-clipper left">
    <div class="circle"> </div>
  </div> <div class="gap-patch">
    <div class="circle"> </div>
  </div>
</div>

<div class="spinner-layer spinner-yellow">
  <div class="circle-clipper left">
    <div class="circle"> </div>
  </div> <div class="gap-patch">
    <div class="circle"> </div>
  </div>
</div>

<div class="spinner-layer spinner-green">
  <div class="circle-clipper left">
    <div class="circle"> </div>
  </div> <div class="gap-patch">
    <div class="circle"> </div>
  </div>
</div>

</div>
</div>