Angular MDBootstrap Loaders Component

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use Loaders Component in Angular MDBootstap. The Loaders Component is used to indicate the loading state of the component with simple animations to keep the users engaged while the page is still loading, which, in turn, helps to enhance the overall user experience.

Properties:

• spinnerType: It allows the user to set the size of a spinner.
• spinnerColor: It allows the user to set the color of a spinner.

Syntax:

<div class="spinner-border"></div>

Approach:

• Download Angular MDBootstrap from the official site.
• Extract the files to the current working directory.
• Install npm in the current project using the following command:

npm install

• After creating your project folder i.e. appname, move to it using the following command:

cd appname

• Start the server using the following command:

ng serve

Project Structure: After complete installation, it will look like the following:

Project Structure

Example 1: This is the basic example that illustrates how to use the Loaders component in Angular MDBootstrap.

app.component.html

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Loaders Component</h4>
    <br />
    <div>
        <h5>Default loader with different sizes & Color</h5>
        Loading
        <div class="spinner-border text-success spinner-border-sm"></div><br>
        Loading
        <div class="spinner-border text-danger"></div><br>
        Loading
        <div class="spinner-border text-secondary"
             style="width: 3rem; height: 3rem;">
        </div>
    </div>
    <br>
    <div>
        <h5>Growing spinner with different sizes & Color</h5>
         Loading
         <div class="spinner-grow text-warning spinner-grow-sm"></div><br/>
         Loading
         <div class="spinner-grow text-primary"></div><br/>
         Loading
        <div class="spinner-grow text-info"
             style="width: 3rem; height: 3rem;">
        </div>
    </div>
</div>

• app.component.ts:

Javascript

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

• app.module.ts:

Javascript

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Output:

Angular MDBootstrap Loaders Component

Example 2: This example illustrates the Growing spinner that does repeatedly gro, rather than spin in the Loaders Component.

• app.component.html:

HTML

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Loaders Component</h4>
    <br />
    <button mdbBtn color="warning"
                   type="button">
       <span class="spinner-border"
             role="status"
             aria-hidden="true">
       </span> GeeksforGeeks
    </button>
    <br/>
    <button mdbBtn color="danger"
                   type="button">
       <span class="spinner-grow"
             role="status"
             aria-hidden="true">
       </span> GeeksforGeeks
    </button>
</div>

• app.component.ts:

Javascript

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

• app.module.ts:

Javascript

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Output:

Growing spinner in Loaders Component

Reference: https://mdbootstrap.com/docs/angular/components/loaders