Cargando



Cómo hacer un Spinner o icono de carga con JQuery

Vamos a ver cómo insertar en las peticiones de nuestra página web un Spinner o icono de carga utilizando JQuery, la librería de JavaScript.


jul 14 2016 10:03
Avanzado
jul 14 2016 13:34

En este tutorial se va realizar la creación de un Spinner, el típico icono de carga que podemos ver en las webs por ejemplo cuando se está trabajando en una petición a la base de datos.

 

spinner1.jpg

 

Es importante usar estos métodos para que el usuario pueda apreciar que nuestra página está trabajando y no piense que no funciona, la retroalimentación al usuario es vital. Vamos a ver un ejemplo en el que utilizaremos JQuery para hacer una petición a la API de google de libros para obtener los de JavaScript.

 

Código HTML


El código de nuestro HTML no tendrá nada de complicación, lo puedes ver a continuación.
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="font/css/font-awesome.min.css">
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="script.js"></script>
        <meta charset="utf-8"/>
        <title>Loading</title>
    </head>

    <body>
        <button id='boton'>Buscar libros JS</button>
        <div id='datos'>
        </div>
    </body>
</html>
Podemos ver en la cabecera que importo el script llamado script.js, veremos después que hace. También importamos JQuery y la fuente que se usará para poner el Spinner, éste no es una imagen, es un icono que se verá bien en todo tipo de pantallas, puedes ver los que hay e instalarlo desde la página oficial de fontawesome. Luego ponemos la codificación de los caracteres en utf-8 a través de meta charset.

 

En la parte del body se ha creado un botón que será el encargado de iniciar la petición a la API y un div donde insertaremos los datos que nos interesen de la respuesta recibida. Ambos tienen un id para poder usarlos desde nuestro script.

 

Código JQuery


El código no tiene mayor complicación si estás acostumbrado a peticiones AJAX con JQuery.
$(document).ready(function () {
    $("#boton").click(function () {
        $('#datos').html('<center> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></center>')
        $.ajax({
            url: "https://www.googleapis.com/books/v1/volumes?q=intitle:javascript"
        }).done(function (data) {
            sleep(2000) //Solo se usa para ver el spinner más tiempo en el ejemplo
            $('#datos').html("")
            for (var i = 0; i < data.items.length; i++) {
                var libro = data.items[i].volumeInfo;
                var autor = libro.authors  
                if(autor == undefined)
                    autor = "?"
                $('#datos').append("<div><h4>"+(i+1)+") "+libro.title + "</h4> - <span> Autor/es: "+autor+"</span></div>")
          
            }
        });
    })
})

function sleep(milisegundos) {
  var comienzo = new Date().getTime();
  while (true) {
    if ((new Date().getTime() - comienzo) > milisegundos)
      break;
  }
}
El código se puede ver envuelto por $(document).ready, esto es necesario para que el script cargue cuando nuestro documento HTML esté listo y se “conozcan” los IDs. Dentro podemos ver que escuchamos un evento click del botón, tal y como se dijo antes, será el que lance la petición.

 

Una vez se lanza el evento click lo primero que se hace es insertar el Spinner (como se dijo anteriormente no es una imagen, si fuera un gif aquí pondríamos la etiqueta img), y acto seguido se procede a realizar la petición AJAX, es una petición GET, por lo que especificamos la URL donde se va a hacer.

 

Vemos el .done, esta parte se va a ejecutar cuando la respuesta de la API termine. Dentro del .done tenemos una llamada a la función sleep (ésta se ha creado para que el código “espere” 2 segundos más después de recibir respuesta, así podrás apreciar bien el Spinner, esto no habría que ponerlo claro está). El código importante es el que vacía el html que tiene el id datos (elimina el Spinner) y lo rellena en un bucle con los datos que recibe de la API, (data es pasado como parámetro en done, es la respuesta), para manejar la respuesta debes saber los datos que devuelve, en este caso se muestra el título de los libros y su autor o autores.

 

Nota
Podríamos poner también .fail, lo que haría es ejecutar el código que contenga en caso de error, pero esa parte se obvia, ya que para este ejemplo no es necesario. Si quieres saber más sobre las peticiones AJAX en JQuery visita el siguiente la página o el siguiente tutorial.

 

La función sleep no forma parte, ni es interesante para la carga del icono, pero nos ayuda a ver bien el Spinner se ha agregado, lo único que hace es obtener el tiempo inicial y hacer un bucle infinito hasta que pasen los milisegundos que se inserten como parámetro, entonces se rompe el bucle y la función termina.

 

Vamos a ver cómo funciona el código, al abrir la página vemos un simple botón:

 

ejecutar_spinner_1.jpg

 

Al pincha en él nos saldrá el Spinner o icono de carga, que se tirará 2 segundos en acción como mínimo (tendrás que sumar el tiempo que tarde la petición):

 

ejecutar_spinner_2.jpg

 

Y al terminar la petición nos mostrará los libros y sus autores tal y como podemos ver a continuación:

 

ejecutar_spinner_3.jpg

 

Nota
Esta técnica la puedes aplicar si haces las peticiones directamente con JavaScript, sin utilizar JQuery, es adaptar el código.


¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X