¿Cómo mostrar Spinner en la pantalla hasta que los datos de la API se carguen usando Angular 8?

La tarea es mostrar una rueda giratoria en la página hasta que llegue la respuesta de la API. Aquí haremos un CSS spinner simple que se cargará hasta que lleguen los datos de la API. También puede tomar spinners de arranque o puede hacer spinner por su cuenta.

Requisito previo: necesitará algunos conocimientos para realizar requests Http get() desde la API y obtener datos.

Aquí necesitará una API para obtener datos. También se puede crear una API falsa y los datos se pueden usar para mostrar. Ya tenemos una API falsa que contiene los siguientes datos:

Acercarse:

Se crea la aplicación angular y el componente necesarios.
```
ng new app_name
ng g c component_name
```

En el archivo component.html, cree un objeto con carga de identificación.

Aquí spinner se define como:

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status" >
    <span class="sr-only" id="loading"></span>
  </div>
</div>

Puedes hacer una ruleta a tu manera.

En el archivo component.css, dele a spinner los estilos que desee.

Aquí spinner tiene el estilo:

#loading{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

Obtenga los datos de la API haciendo una solicitud de obtención.
Después de obtener los datos de la API, guárdelos en una variable de respuesta.
Hay una declaración if que verifica si la respuesta de la API llegó o no.
Si llegó la respuesta, entonces hay una función hideloader() a la que se llama.
En esa función hideloader() al usar la manipulación DOM, configuramos la visualización del elemento de carga en ninguno.
```
document.getElementById('loading').style.display = 'none';
```
Para una mayor claridad de la obtención de datos, mostré los datos obtenidos en HTML mediante el enlace de datos de interpolación.

Implementación de código

aplicación.módulo.ts

import { BrowserModule } from 
    '@angular/platform-browser';
  
import { NgModule } from 
    '@angular/core';
  
import { HttpClientModule } from 
    '@angular/common/http';
  
import { FormsModule } from 
    '@angular/forms';
  
import { AppRoutingModule } from 
    './app-routing.module';
  
import { AppComponent } from 
    './app.component';
  
import { ShowApiComponent } from 
    './show-api/show-api.component';
  
@NgModule({
    declarations: [
        AppComponent,
        ShowApiComponent,
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

show-api.component.html

<h1>GeeksforGeeks</h1>
  
<!-- spinnner element is 
    defined with id loading -->
<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="sr-only" id="loading"></span>
    </div>
</div>
  
<!-- data from API is displayed  -->
<h2>{{ dataDisplay }}</h2>

show-api.component.css

#loading{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  }
    
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

show-api.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
    selector: 'app-show-api',
    templateUrl: './show-api.component.html',
    styleUrls: ['./show-api.component.css']
})
export class ShowApiComponent implements OnInit {
    dt: any;
    dataDisplay: any;
    constructor(private http: HttpClient) {
    }
  
    ngOnInit(): void {
        this.http.get(
'http://www.mocky.io/v2/5ec6a61b3200005e00d75058')
            .subscribe(Response => {
                  
                // If Response comes function
                // hideloader() is called
                if (Response) {
                    hideloader();
                }
                console.log(Response)
                this.dt = Response;
                this.dataDisplay = this.dt.data;
            });
        // Function is defined
        function hideloader() {
  
            // Setting display of spinner
            // element to none
            document.getElementById('loading')
                .style.display = 'none';
        }
    }
}

Producción:

Ejecute el servidor de desarrollo para ver el resultado.

Enlace API:” http://www.mocky.io/v2/5ec6a61b3200005e00d75058 “

CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta