Cómo usar un loader en tu sitio web
Por 
En muchas ocasiones necesitamos ocultar el contenido de nuestro sitio web mientras termina de cargar, para eso, te mostramos cómo usar un loader (o preloader) en tu sitio web de forma sencilla, utilizando CSS y Javascript (sin librerías como JQuery).
Lo primero a tener en cuenta son los elementos de nuestro HTML, para ello utilizaremos un componente «loader-section» que puedes agregar al principio del <body>.
<div class="loader-section">
<span class="loader"></span>
</div>Luego, en el CSS definimos los estilos de estas etiquetas:
.loader-section{
width: 100vw;
height: 100vh;
max-width: 100%;
position: fixed;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
z-index:999;
transition: all 1s 1s ease-out;
opacity:1;
}
.loaded{
opacity:0;
z-index:-1;
}
.loader {
width: 48px;
height: 48px;
border: 5px solid #623ddb;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- .loader-section: es la sección que abarca toda la pantalla, contiene al loader y oculta nuestro contenido.
- .loaded: clase que usaremos para ocultar al .loader-section.
- .loader: es nuestro icono animado que se mostrará hasta que lo ocultemos.
Deberías ver algo como esto:
See the Pen Page Loader by Angel Mavare (@angelmavare) on CodePen.
Si deseas utilizar otro loader con otras animaciones entonces deberías reemplazar el código de la etiqueta .loader y sus respectivos estilos y keyframes CSS. Te dejo un par de recursos útiles donde encontrarlos:
- https://cssloaders.github.io/ (Utilicé uno de estos para este tutorial)
- https://loading.io/css/
Ahora, queremos ocultar el loader al cargar nuestro sitio. Para ello usaremos un poco de Javascript, toma nota del siguiente código:
function pageLoaded() {
let loaderSection = document.querySelector('.loader-section');
loaderSection.classList.add('loaded');
}
document.onload = pageLoaded();Con la función pageLoaded() seleccionamos al elemento .loader-section y le agregamos la clase .loaded. Finalmente llamamos a nuestra función al momento de cargar completamente nuestro sitio, ocultando así al loader y dejando al descubierto nuestro contenido.
Es importante acotar que solo ocultamos (y no destruimos) al .loader-section a través de la propiedad opacity y z-index, de modo que si deseas volver a mostrarlo solo deberás remover la etiqueta .loaded .
El ejemplo completo puedes verlo en mi codepen:
See the Pen Page loader hidden effect js by Angel Mavare (@angelmavare) on CodePen.
Espero que esta entrada sobre «cómo usar un loader en tu sitio web» haya sido de tu utilidad. No olvides compartirlo con alguien que también lo necesite y si te interesa ver más contenido de este tipo puedes visitar los siguientes enlaces:
Gracias !!!!!!!!!!!!!