¿Cómo crear un Bootstrap Spinner y mostrarlo en la pantalla hasta que se carguen los datos de la API?

La tarea es mostrar una rueda giratoria en la página hasta que llegue la respuesta de datos de la API. Hemos tomado bootstrap spinner para mostrar el ejemplo.

Requisito previo: 

Acercarse:

  • Cree el archivo HTML, CSS y JavaScript necesario para la tarea.
  • En el archivo HTML, enlace bootstrap en la sección principal.

    <enlace rel=”hoja de estilo” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” integridad=”sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh” crossorigin=”anónimo” >

  • Ahora, el control giratorio deberá detenerse una vez que se carguen los datos de la API.
  • Por lo tanto, obtenga los datos de la API mediante el método API Fetch().
  • Almacene los datos en una variable de respuesta .
  • Hay una instrucción if que verifica si la respuesta de la API llegó o no .
  • Si llegó la respuesta, entonces se llama a la función hideSpinner() .
  • En esa función hideSpinner() al usar la manipulación DOM , configuramos la visualización del elemento Spinner en none .

archivo HTML:

<!DOCTYPE html>
<html>
  
<head>
    <script src="script.js"></script>
    <title>Spinner</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
</head>
  
<body>
    <div class="spinner-border text-primary" 
        id="spinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div id="data"></div>
</body>
  
</html>

Archivo JavaScript:

// API url 
const api_url =
"https://mygfgapi.free.beeceptor.com/my/api/path";
  
// Defining async function 
async function getapi(url) {
  
    // Storing response 
    const response = await fetch(url);
  
    // Storing data in form of JSON 
    var apidata = await response.json();
    console.log(apidata);
    if (response) {
        hideSpinner();
    }
    document.getElementById("data").innerHTML
        = `<h1>${apidata.data}</h1>`;
}
  
// Calling that async function 
getapi(api_url);
  
// Function to hide the Spinner
function hideSpinner() {
    document.getElementById('spinner')
            .style.display = 'none';
} 

Producción:

Puede ver en la ventana de salida, el control giratorio se carga hasta que llegan los datos de la API.

Enlace API: “https://mygfgapi.free.beeceptor.com/my/api/path”

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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *