Cómo agregar un Precargador a tu Página Web

Agregar un precargador a una página web es una técnica útil para mejorar la experiencia de usuario al cargar contenido. Un precargador es una animación que se muestra mientras está cargando una web, le indica al usuario que el contenido se está cargando y que pronto estará disponible.

Cómo funciona el precargador

Un precargador es: un elemento que contiene una animación y el cual se muestra encima de todo el contenido de una página. Este elemento se muestra hasta que se ha completado la carga de la página, se detecta la carga completa de la página con el evento load.

1.- Agregar el código HTML

Para empezar creamos un elemento HTML, se recomienda colocarlo como primer elemento dentro de la etiqueta body:


<div class="preloader"></div>

2.- Agregar estilos al Precargador

Usamos CSS para personalizar el precargador: colocamos el precargador en posición fija, que ocupe el 100% de la pantalla y que se ubique encima de cualquier otro contenido. Además agregamos un semicírculo rotando en el centro del precargador:


.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
}

.preloader::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #333;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

3.- Ocultar el precargador

Para completar el precargador, usamos JavaScript para detectar que se ha completado la descarga de la web y con ello ocultamos el precargador.


window.addEventListener('load', () => {
    const preloader = document.querySelector('.preloader');
    preloader.style.display = 'none';
});

Listo, ya tenemos el precargador completo, puedes ver un demo en Preloader básico.

4.- Mejorando el Precargador

Para mejorar el precargador vamos a agregar una animación de salida del precargador. Entonces, cambiamos el script para que en lugar de ocultar el precargador agregue un estilo al body el cual encargará de ocultar el precargador.


window.addEventListener('load', () => {
    const body = document.querySelector('body');
    body.classList.add('loaded');
});

Luego agregamos estilos con una animación de salida del precargador.


.loaded .preloader {
    transition-property: opacity, left;
    transition-duration: 0.75s, 0s;
    transition-delay: 0s, 0.75s;
    opacity: 0;
    left: 100%;
}

¡Listo! Con estos pasos, has agregado un precargador a tu página web, mejorando así la experiencia de carga para tus usuarios. Recuerda ajustar los estilos y la animación del precargador según el diseño y la temática de tu sitio web.