Introducción  Angular es una plataforma de desarrollo para crear aplicaciones WEB, móviles y de escritorio utilizando HTML, CSS y TypeScript (JavaScript). Actualmente, Angular se encuentra en la versión 14 y Google es el principal mantenedor del proyecto.    es una biblioteca de componentes de carga (spinner) con más de 50 tipos diferentes. ngx-spinner  requisitos previos  Antes de comenzar, debe instalar y configurar las herramientas:   git   Node.js y npm   CLI angular  IDE (por ejemplo   ) , código de Visual Studio  Empezando  Crear la aplicación angular    Vamos a crear la aplicación con la estructura base Angular usando   con el archivo de ruta y el formato de estilo SCSS 1. @angular/cli   ng new angular-spinner ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ] CREATE angular-spinner/README.md (1060 bytes) CREATE angular-spinner/.editorconfig (274 bytes) CREATE angular-spinner/.gitignore (604 bytes) CREATE angular-spinner/angular.json (3261 bytes) CREATE angular-spinner/package.json (1077 bytes) CREATE angular-spinner/tsconfig.json (783 bytes) CREATE angular-spinner/.browserslistrc (703 bytes) CREATE angular-spinner/karma.conf.js (1432 bytes) CREATE angular-spinner/tsconfig.app.json (287 bytes) CREATE angular-spinner/tsconfig.spec.json (333 bytes) CREATE angular-spinner/src/favicon.ico (948 bytes) CREATE angular-spinner/src/index.html (300 bytes) CREATE angular-spinner/src/main.ts (372 bytes) CREATE angular-spinner/src/polyfills.ts (2820 bytes) CREATE angular-spinner/src/styles.scss (80 bytes) CREATE angular-spinner/src/test.ts (788 bytes) CREATE angular-spinner/src/assets/.gitkeep (0 bytes) CREATE angular-spinner/src/environments/environment.prod.ts (51 bytes) CREATE angular-spinner/src/environments/environment.ts (658 bytes) CREATE angular-spinner/src/app/app-routing.module.ts (245 bytes) CREATE angular-spinner/src/app/app.module.ts (393 bytes) CREATE angular-spinner/src/app/app.component.scss (0 bytes) CREATE angular-spinner/src/app/app.component.html (24617 bytes) CREATE angular-spinner/src/app/app.component.spec.ts (1100 bytes) CREATE angular-spinner/src/app/app.component.ts (220 bytes) ✔ Packages installed successfully.    Instale y configure el marco Bootstrap CSS. Luego, realice los pasos 2 y 3 de la publicación,   . 2. Agregar el marco CSS de Bootstrap a una aplicación Angular    Instale la biblioteca   . 3. ngx-spinner   npm install ngx-spinner    Importe los   ,   y   . Configure los ajustes de registro. Cambie el archivo   y agregue las líneas de la siguiente manera: 4. BrowserAnimationsModule FormsModule NgxSpinnerModule app.module.ts   import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgxSpinnerModule } from 'ngx-spinner'; imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, NgxSpinnerModule, AppRoutingModule, ],    Elimine el contenido de la clase   del archivo   . Importe el servicio   y cree el método   como se muestra a continuación: 5. AppComponent src/app/app.component.ts NgxSpinnerService showSpinner   import { Component } from '@angular/core'; import { NgxSpinnerService } from 'ngx-spinner'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { typeSelected: string; constructor(private spinnerService: NgxSpinnerService) { this.typeSelected = 'ball-fussion'; } public showSpinner(): void { this.spinnerService.show(); setTimeout(() => { this.spinnerService.hide(); }, 5000); // 5 seconds } }    Elimine el contenido del archivo   . Agregue el componente   y las opciones de spinners como se muestra a continuación: 6. src/app/app.component.html ngx-spinner   <div class="container-fluid py-3"> <h1>Angular Spinner</h1> <div class="d-grid gap-2 col-4 mt-4 mx-auto"> <select name="type" #type="ngModel" [(ngModel)]="typeSelected" required [class.is-invalid]="type.invalid && (type.dirty || type.touched)" class="form-select form-select-sm"> <option value="ball-8bits">Ball 8bits</option> <option value="ball-atom">Ball Atom</option> <option value="ball-beat">Ball Beat</option> <option value="ball-circus">Ball Circus</option> <option value="ball-climbing-dot">Ball Climbing Dot</option> <option value="ball-clip-rotate">Ball Clip Rotate</option> <option value="ball-clip-rotate-multiple">Ball Clip Rotate Multiple</option> <option value="ball-clip-rotate-pulse">Ball Clip Rotate Pulse</option> <option value="ball-elastic-dots">Ball Elastic Dots</option> <option value="ball-fall">Ball Fall</option> <option value="ball-fussion">Ball Fussion</option> <option value="ball-grid-beat">Ball Grid Beat</option> <option value="ball-grid-pulse">Ball Grid Pulse</option> <option value="ball-newton-cradle">Ball Newton Cradle</option> <option value="ball-pulse">Ball Pulse</option> <option value="ball-pulse-rise">Ball Pulse Rise</option> <option value="ball-pulse-sync">Ball Pulse Sync</option> <option value="ball-rotate">Ball Rotate</option> <option value="ball-running-dots">Ball Running Dots</option> <option value="ball-scale">Ball Scale</option> <option value="ball-scale-multiple">Ball Scale Multiple</option> <option value="ball-scale-pulse">Ball Scale Pulse</option> <option value="ball-scale-ripple">Ball Scale Ripple</option> <option value="ball-scale-ripple-multiple">Ball Scale Ripple Multiple</option> <option value="ball-spin">Ball Spin</option> <option value="ball-spin-clockwise">Ball Spin Clockwise</option> <option value="ball-spin-clockwise-fade">Ball Spin Clockwise Fade</option> <option value="ball-spin-clockwise-fade-rotating">Ball Spin Clockwise Fade Rotating</option> <option value="ball-spin-fade">Ball Spin Fade</option> <option value="ball-spin-fade-rotating">Ball Spin Fade Rotating</option> <option value="ball-spin-rotate">Ball Spin Rotate</option> <option value="ball-square-clockwise-spin">Ball Square Clockwise Spin</option> <option value="ball-square-spin">Ball Square Spin</option> <option value="ball-triangle-path">Ball Triangle Path</option> <option value="ball-zig-zag">Ball Zig Zag</option> <option value="ball-zig-zag-deflect">Ball Zig Zag Deflect</option> <option value="cog">Cog</option> <option value="cube-transition">Cube Transition</option> <option value="fire">Fire</option> <option value="line-scale">Line Scale</option> <option value="line-scale-party">Line Scale Party</option> <option value="line-scale-pulse-out">Line Scale Pulse Out</option> <option value="line-scale-pulse-out-rapid">Line Scale Pulse Out Rapid</option> <option value="line-spin-clockwise-fade">Line Spin Clockwise Fade</option> <option value="line-spin-clockwise-fade-rotating">Line Spin Clockwise Fade Rotating</option> <option value="line-spin-fade">Line Spin Fade</option> <option value="line-spin-fade-rotating">Line Spin Fade Rotating</option> <option value="pacman">Pacman</option> <option value="square-jelly-box">Square Jelly Box</option> <option value="square-loader">Square Loader</option> <option value="square-spin">Square Spin</option> <option value="timer">Timer</option> <option value="triangle-skew-spin">Triangle Skew Spin</option> </select> <div *ngIf="type.invalid && (type.dirty || type.touched)" class="invalid-feedback"> <div *ngIf="type.errors?.required">This field is required.</div> </div> <button type="button" class="btn btn-sm btn-primary" (click)="showSpinner()">Show Spinner</button> </div> </div> <ngx-spinner size="medium" [type]="typeSelected"></ngx-spinner>    Ejecute la aplicación con el siguiente comando: 7.   npm start > angular-spinner@1.0.0 start > ng serve ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Size vendor.js | vendor | 2.79 MB styles.css | styles | 266.58 kB polyfills.js | polyfills | 128.51 kB scripts.js | scripts | 76.67 kB main.js | main | 11.04 kB runtime.js | runtime | 6.63 kB | Initial Total | 3.27 MB Build at: 2021-09-07T01:43:42.126Z - Hash: 52e507be2073bee125a1 - Time: 5289ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ✔ Compiled successfully.    ¡Listo! Acceda a la URL   y compruebe si la aplicación funciona. Vea cómo funciona la aplicación en   y   .  8. http://localhost:4200/ GitHub Pages Stackblitz  El repositorio de aplicaciones está disponible en   . https://github.com/rodrigokamada/angular-spinner  Este tutorial fue publicado en mi   en portugués. blog

Ball

Google

I am creating content to share my knowledge and help people on their technology journey.

Agregar el componente de carga (spinner) a una aplicación Angular

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

El modelo Bitcoin UTXO, impulsando un ecosistema único

Una breve introducción a la teoría del cerebro de Boltzmann

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

El modelo Bitcoin UTXO, impulsando un ecosistema único

Una breve introducción a la teoría del cerebro de Boltzmann

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps