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:
Ejemplo 1: este es el ejemplo básico que ilustra cómo usar el componente Loaders en 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>
- aplicación.componente.ts:
Javascript
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:
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{}
Producción:
Ejemplo 2: Este ejemplo ilustra el Spinner de crecimiento que crece repetidamente, en lugar de girar en el componente Loaders.
- aplicación.componente.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>
- aplicación.componente.ts:
Javascript
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:
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{}
Producción:
Referencia: https://mdbootstrap.com/docs/angular/components/loaders