Cargando... Animación en Vanilla JavaScript

En esta guía, aprenda a crear un ícono giratorio de carga con un GIF y CSS animado personalizado en JavaScript estándar, al cargar contenido en una página web o esperar respuestas de la API.

Introducción

Al desarrollar sitios web y aplicaciones web, incluir una animación de carga puede mejorar significativamente la experiencia del usuario al comunicar lo que está sucediendo. Esto atrae a los usuarios y mantiene su atención mientras cargan el contenido, y ayuda a los usuarios a comprender lo que está sucediendo en lugar de dejarlos adivinando.

En esta guía, veremos cómo usar Vanilla JavaScript para crear una animación de carga. Trabajaremos con GIF animados y cargadores creados con CSS y veremos cómo usarlos en dos escenarios: cargar contenido en el inicio de la aplicación/sitio web o solicitar contenido de una API externa.

css and gif loading spinner animation in vanilla javascript

Cómo crear un cargador

Hay varias formas en que las personas pueden querer mostrar su cargador. A los efectos de esta guía, construiremos un cargador que cubrirá toda la pantalla y luego desaparecerá cuando la página termine de cargarse. En primer lugar, necesitamos crear una página HTML de marcador de posición:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="loader-container">
    <div class="spinner"></div>
</div>

<div class="main-content">
    <h1>Hello World!</h1>
    <p>
        This is a demo Project to show how to add animated loading with Vanilla
        JavaScript.
    </p>
    <div class="buttons">
        <button class="btn"><a href="#">Read Article</a></button>
        <button class="btn get-quote">Generate Quote</button>
        </div>
        <div class="quote-section">
        <blockquote class="quote">
            If you do not express your own original ideas, if you do not listen to
            your own being, you will have betrayed yourself.
        </blockquote>
        <span class="author">- Rollo May</span>
        </div>
</div>

En aras de la simplicidad, solo tenemos dos bloques <div>: uno para el cargador y otro para el contenido del sitio web.

Como se indicó anteriormente, el ícono de carga puede ser un GIF, un ícono animado creado con CSS u otra cosa. Lo importante a recordar es que el mismo enfoque se aplica a cualquier tipo de ícono de carga que usemos.

Crear cargador usando un GIF

Un GIF es un ícono animado que se reproduce indefinidamente. Una vez que hemos creado nuestro GIF, diseñaremos el div loader-container que lo albergará. ¡Hay muchas maneras de darle estilo! Puedes ser realmente creativo aquí. Simplemente agregaremos una capa con un fondo negro en la parte superior de nuestra página junto al ícono, para "bloquear" el contenido de carga:

1
2
3
4
5
6
7
8
9
.loader-container {
    width: 100%;
    height: 100vh;
    position: fixed;
    background: #000
        url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center
        no-repeat;
    z-index: 1;
}

Cuando carguemos nuestra página web ahora, veremos un fondo negro con un GIF cargando en el medio de la pantalla, similar a esto:

En este punto, estamos listos para implementar la carga mediante JavaScript. Pero también veamos cómo podemos usar una animación creada con CSS en lugar de un GIF, que no requiere un archivo adicional para importar.

Crear cargador usando CSS

Crearemos exactamente el mismo icono con CSS. Recuerde, creamos un div extra (spinner) dentro del div loader-container y eso es lo que usaremos para representar el icono:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.spinner {
    width: 64px;
    height: 64px;
    border: 8px solid;
    border-color: #3d5af1 transparent #3d5af1 transparent;
    border-radius: 50%;
    animation: spin-anim 1.2s linear infinite;
}

@keyframes spin-anim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

El código anterior nos ayudará a crear un ícono de cargador CSS del cual ahora podemos usar el div del contenedor del cargador para centrar y agregar el fondo negro como lo hicimos anteriormente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.loader-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    background: #000;
    z-index: 1;
}

Ahora que hemos visto los dos tipos de cargadores animados disponibles, usemos JavaScript para controlar cuándo aparece y desaparece esta animación de carga.

{.icon aria-hidden=“true”}

Nota: Puede consultar esta [Demostración de CodePen] en vivo (https://codepen.io/olawanlejoel/pen/wvyzzYm) para ver el cargador que hemos creado en acción.

Cómo implementar una animación de carga con JavaScript

JavaScript nos permite manipular nuestra estructura HTML y eliminar u ocultar el cargador-contenedor que actualmente se muestra delante del contenido del sitio web. Hay dos enfoques principales para lograr esto: simplemente ocultar el “cargador-contenedor” o eliminarlo por completo.

Cualquiera que sea el enfoque que elija, el primer paso es usar querySelector() o getElementById() para recuperar el loader-container para que podamos manipularlo:

1
const loaderContainer = document.querySelector('.loader-container');

En segundo lugar, usaremos eventListener para escuchar un evento load, de modo que llame a la función de devolución de llamada cuando ocurra el evento load:

1
2
3
window.addEventListener('load', () => {
    // ...
});

Ocultar el elemento Loading...

El enfoque más común es ocultar el loader-container con display: none para que desaparezca cuando el contenido esté completamente cargado.

HTML DOM nos permite cambiar el estilo de nuestros elementos HTML desde JavaScript, y el siguiente código indica que estamos configurando la propiedad display del contenedor del cargador en none para que no aparezca una vez que la carga sea exitosa:

1
2
3
window.addEventListener('load', () => {
    loaderContainer.style.display = 'none';
});

Alternativamente, puede crear una clase separada que contenga la propiedad display: none:

1
2
3
.loader-container-hidden {
    display: none;
}

Y luego use classList.add() para agregar la clase al elemento loader-container:

1
2
3
window.addEventListener('load', () => {
    loaderContainer.classList.add('loader-container-hidden');
});

Eliminación del elemento Loading...

Hasta ahora, hemos visto un método importante que nos permite ocultar nuestro loader-container, lo que implica que el elemento aún está presente, pero oculto. Otra opción es eliminar el elemento por completo:

1
2
3
window.addEventListener('load', () => {
    loaderContainer.parentElement.removeChild(loaderContainer);
});

En este punto, cuando cargamos nuestra página, la animación de carga se mostrará hasta que el contenido de la página esté completamente cargado.

Implementación de la animación de carga al solicitar contenido externo desde una API

Obtener contenido de una API externa es otra situación que puede necesitar la inclusión de un cargador. Este tipo de contenido puede tardar algún tiempo en recuperarse y mostrarse, por lo que es mejor incluir un cargador.

En nuestro caso, intentemos obtener una cotización de una API de cotizaciones usando la API Fetch integrada. Tenga en cuenta que el código HTML que hemos creado al principio de este artículo tiene un botón "Generar cotización". Todo lo que tenemos que hacer es usar el método document.querxySelector() para obtener el elemento y crear una función de devolución de llamada para manejar un evento de clic que se activa cuando el usuario hace clic en el botón:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
const getQuoteBtn = document.querySelector('.get-quote');

getQuoteBtn.addEventListener('click', () => {
    fetch('https://api.quotable.io/random')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            const quote = document.querySelector('.quote');
            const author = document.querySelector('.author');
            quote.innerHTML = data.content;
            author.innerHTML = data.author;
        });
});

Esto nos ayudará con éxito a obtener cotizaciones aleatorias en nuestra aplicación, pero nos gustaría tener una animación de carga para que el usuario sepa que estamos esperando contenido. Para lograr esto, crearemos dos métodos, uno para mostrar el loader-container y el otro para ocultarlo:

1
2
3
4
5
6
7
const displayLoading = () => {
    loaderContainer.style.display = 'block';
};

const hideLoading = () => {
    loaderContainer.style.display = 'none';
};

{.icon aria-hidden=“true”}

Nota: Estamos usando display: none, pero podemos usar cualquiera de los otros métodos que enumeramos anteriormente.

En este punto, finalmente podemos incorporar la animación de carga en la función de devolución de llamada. Cuando comience la recuperación, la función de devolución de llamada mostrará la animación de carga y la ocultará una vez que se reciban los datos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
getQuoteBtn.addEventListener('click', () => {
    displayLoading();
    fetch('https://api.quotable.io/random')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            hideLoading();
            const quote = document.querySelector('.quote');
            const author = document.querySelector('.author');
            quote.innerHTML = data.content;
            author.innerHTML = data.author;
        });
});

Conclusión

En este artículo, hemos aprendido a usar JavaScript estándar para crear una animación de carga y mostrarla de manera adecuada. Consideramos varios enfoques para lograr esto y analizamos un par de casos de uso diferentes para la animación de carga. Hemos optado por usar el círculo giratorio como un cargador, pero puede cambiarlo de la forma que desee; siéntase libre de crear su propio cargador animado GIF o CSS.