
Es bastante común ver un estado de carga en los sitios en estos días, particularmente porque las aplicaciones web progresivas y los sitios reactivos están en aumento. Es una forma de mejorar el rendimiento “percibido”, es decir, hacer que parezca que el sitio se carga más rápido de lo que realmente es.
No hay escasez de formas de hacer un cargador: todo lo que se necesita es una búsqueda rápida en CodePen para ver montones de ejemplos, desde GIF animados hasta animaciones complejas. Si bien es tentador construir el cargador más elegante, en realidad podemos hacer un trabajo bastante bueno con solo una cantidad mínima de CSS y JavaScript.
Aquí hay un ejemplo que podemos hacer juntos.
Ver la pluma
Precargador con JavaScript FadeOut de Maks Akymenko (@maximakymenko)
en CodePen.
SVG y CSS es todo lo que necesitamos para el spinner
Supongo que ya ha creado un proyecto, así que saltaremos y comenzaremos con la ruleta, o “precargador”, como también se le llama.
SVG es una gran opción para un spinner. Es escalable e implementarlo es tan fácil como una etiqueta de imagen. Podríamos hacer uno desde cero, digamos en un editor de imágenes como Illustrator, Sketch o Figma. Para este ejemplo, solo voy a tomar este de loading.io, que es un buen recurso para crear y personalizar diferentes cargadores.
Ahora que tenemos un SVG para el objeto visual, podemos colocarlo en HTML:
<div class="preloader">
<img src="https://css-tricks.com/lets-make-a-fancy-but-uncomplicated-page-loader/spinner.svg" alt="spinner">
</div>
Estamos usando .preloader
como envoltorio, principalmente porque nos ayuda a posicionar la imagen en la página, pero también porque nos ayudará a ocultar y revelar el contenido de la página mientras el cargador funciona.
Vamos a darle estilo:
.preloader {
align-items: center;
background: rgb(23, 22, 22);
display: flex;
height: 100vh;
justify-content: center;
left: 0;
position: fixed;
top: 0;
transition: opacity 0.3s linear;
width: 100%;
z-index: 9999;
}
Esto está haciendo algunas cosas que son más que cosméticas:
- Estamos mostrando el cargador directamente en el centro de la pantalla, usando propiedades y valores de flexbox.
- Hemos hecho que el elemento ocupe todo el ancho y alto de la pantalla y le hemos dado un fondo negro (bueno, en realidad un gris muy, muy oscuro). Eso significa que todo lo que hay detrás (como el contenido de la página) está completamente oculto. Si nuestra página tuviera un color de fondo diferente (por ejemplo, blanco), entonces ajustaríamos el color de fondo del cargador en consecuencia.
- La posición es fija, por lo que el desplazamiento no afectará su ubicación en la página. Además, el
z-index
es lo suficientemente alto como para que ningún otro elemento deba apilarse encima y bloquearlo de la vista.
Esto es lo que deberíamos ver hasta ahora al abrirlo en el navegador:
Algunos JavaScript ligeros manejan la ocultación
Tenemos un control giratorio elegante que cubre toda la página, ya sea que estemos viendo esto en pantallas pequeñas o grandes. No, podemos escribir algo de lógica para que desaparezca después de una cierta cantidad de tiempo. Eso requerirá una pequeña dosis de JavaScript.
Primero, seleccionemos el .preloader
elemento que acabamos de diseñar:
const preloader = document.querySelector('.preloader');
En realidad, sería mucho más fácil agregar una clase al cargador que establezca su opacidad en cero. Sin embargo, no sería tan sencillo como lo que estamos haciendo aquí, que es usar una pequeña porción de JavaScript para crear un fadeOut
función.
const fadeEffect = setInterval(() => {
// if we don't set opacity 1 in CSS, then
// it will be equaled to "" -- that's why
// we check it, and if so, set opacity to 1
if (!preloader.style.opacity) {
preloader.style.opacity = 1;
}
if (preloader.style.opacity > 0) {
preloader.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 100);
💡 jQuery tiene una función que hace esto de inmediato. Aproveche eso si ya está usando jQuery en su proyecto. De lo contrario, usarlo con JavaScript vainilla es el camino a seguir.
Déjame explicarte un poco el JavaScript. Como dice el comentario, si nuestro .preloader
elemento no tiene el opacity
conjunto de propiedades, entonces será igual a vacío (""
) y podemos establecerlo en un valor de 1 manualmente para asegurarnos de que se muestre cuando se cargue el documento.
Una vez que sabemos que la opacidad está configurada, configuramos la manipulación. Toda la función está envuelta en setInterval
y comprobamos si el opacity
propiedad cada 100 milisegundos para ver si es mayor que cero. Siempre que esté por encima de cero, disminuimos su valor en incrementos de 0.1, lo que crea un efecto suave que desvanece el elemento con el tiempo.
Una vez que alcanzamos la opacidad cero, clearInterval
para evitar que el script se ejecute infinitamente. Siéntase libre de jugar con el tiempo y la disminución de puntos para satisfacer sus necesidades.
Lo último que queda por hacer es llamar a la función. Lo llamaremos cuando se cargue la ventana:
window.addEventListener('load', fadeEffect);
Estamos usando intencionalmente el load
evento en lugar de DOMContentLoaded
porque el DOMContentLoaded
El evento se activa cuando el documento se ha cargado y analizado por completo. Eso significa que no * espera a que las hojas de estilo, imágenes y subcuadros terminen de cargarse * * antes de que se ejecute *. El load
El evento se puede usar para detectar una página completamente cargada, y eso es exactamente lo que estamos buscando. De lo contrario, la función se iniciaría antes de que nuestro CSS y SVG estén listos.
Suelta algo de contenido en el HTML y prueba cosas. Aquí está la demostración nuevamente:
Ver la pluma
Precargador con JavaScript FadeOut de Maks Akymenko (@maximakymenko)
en CodePen.
¡Felicidades! Ahora sabe cómo crear un efecto de carga bastante agradable usando nada más que una imagen y una pizca de CSS y JavaScript. ¡Disfrutar!