Hola a todos, hoy os voy a explicar como podemos mostrar un spinner durante la carga de datos en Angular 2+.
En nuestras aplicaciones, cargaremos datos y no siempre nos vendrá todo a tiempo, por lo que lo suyo es indicar de alguna manera al usuario que los datos aun no se cargaron y que no de la sensación de que este fallando la aplicación.
Para esto, lo que haremos es crearnos un atributo booleano, que estará a false inicialmente y cuando los datos estén cargados lo pondremos a true.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { public load: boolean; constructor(){ this.load = false; } ngOnInit(): void { setTimeout(() => { this.load = true; }, 5000); } }
En este caso, hemos puesto un setTimeout para simular una llegada de datos, lo que hace es que a los 5 segundos (5000 milisegundos) se ejecuta el código de dentro, es decir, que pone el load a true.
En la parte de HTML, tendremos dos zonas diferenciadas, cuando carga esta cargada y cuando no este cargada. Lo haremos con *ngIf.
<div class="overlay" *ngIf="!load"> <div class="spinner "> <img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"/> </div> </div> <div *ngIf="load"> Datos cargados correctamente </div>
Mientras no este cargado, mostraremos una imagen que es el spinner.
NOTA: podéis poner la imagen en assets, yo por cosas de stackblizt no he podido.
También pongo esta clase que utilizo para que se centre y se fije mas un overlay para que no se pueda clickar en la app.
.overlay{ z-index: 2; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(0, 0%, 100%, .6); cursor: default; } .spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) }
Os dejo el ejemplo completo:
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta