Componente de cargadores angulares MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar Loaders Component en Angular MDBootstap. El componente Loaders se usa para indicar el estado de carga del componente con animaciones simples para mantener a los usuarios interesados ​​mientras la página aún se está cargando, lo que, a su vez, ayuda a mejorar la experiencia general del usuario.

Propiedades:

• spinnerType: permite al usuario establecer el tamaño de una ruleta.
• spinnerColor: permite al usuario establecer el color de una ruleta.

Sintaxis:

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

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos al directorio de trabajo actual.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo 1: este es el ejemplo básico que ilustra cómo usar el componente Loaders en Angular MDBootstrap.

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

• aplicación.componente.ts:

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

• aplicación.módulo.ts:

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{}

Producción:

Componente de cargadores angulares MDBootstrap

Ejemplo 2: Este ejemplo ilustra el Spinner de crecimiento que crece repetidamente, en lugar de girar en el componente Loaders.

• aplicación.componente.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>

• aplicación.componente.ts:

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

• aplicación.módulo.ts:

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{}

Producción:

Spinner creciente en Loaders Component

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