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.

HackerNoon Mobile

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

Demasiado Largo; Para Leer

Companies Mentioned

@rodrigokamada

HISTORIAS RELACIONADAS