Este pequeño tutorial es una deuda que estoy saldando con unos exalumnos… Voy a mostrar como hacer un Cargador para mi sitio con CSS con JS, con una animación de css y el funcionamiento en Javascript.
HTML para mi cargador
La primera parte sería planear la animación que queremos hacer, no queremos nada muy elaborado, pero si nos vamos a tomar el tiempo para que esta sea, a pesar de sencilla, bonita.
Empecemos por el html:
<div id="cargador" class="cargador">
<div></div>
</div>
Lo primero es poner en html dentro del body el objeto con el que vamos a crear el cargador, vamos a poner una identidad “cargador” y una clase “cargador” que si bien tienen el mismo nombre no implica que funcionen para lo mismo. La función de la clase será que al momento de terminar la carga el navegador esa clase quite el cargador.
Ahora si, vamos a estilizarlo:
#cargador {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.8);
display: flex;
z-index: 9999;
}
#cargador div {
margin: auto;
width: 100px;
height: 100px;
position: relative;
}
La identidad cargador es lo que va a cubrir todo para que no se vea el contenido que está por cargar, el ancho y el alto al 100% hacen que el objeto cubra todo el espacio pero la position: fixed; con sus respectivos top: 0; right: 0; bottom: 0; left: 0; hacen que el objeto se mantenga siempre en esa posición y que nunca se vaya cuando se haga un scroll con la barra… pero el z-index: 9999;
CSS para mi cargador
El display: flex; es la propiedad del padre (entiendase #cargador) que va a permitir al hijo (entiendase la div dentro de #cargador).
El alto y el ancho van a ser 100px pero todavía en este punto no se verá nada, porque esto solamente va a dar dimensiones a esta división que va a contener la animación… El position: relative; es para poder contener posteriormente la animación y eso lo dejamos de lado por el momento, pero una cosa que todavía se me hace maravillosa es la posibilidad de centrar un objeto con solo un margin: auto; ¡Oh gracias magnífico flexbox! Esta propiedad de margen con el valor automático va a centrar el objeto perfectamente, si quieren comprobarlo incluyan un border: solid red 1px; en el #cargador div.
La animación del cargador
Esta animación la vamos a hacer con el css pero para empezar a animar necesitamos los objetos a animar…
#cargador div::before,
#cargador div::after {
content: "";
box-sizing: border-box;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 100%;
}
#cargador div::before {
border: solid 10px #aaa;
}
#cargador div::after {
border: solid 10px transparent;
border-top: solid 10px #00aeef;
animation: vuelta 1s infinite linear;
}
La primera parte será dar las características generales a los objetos que vamos a crear a partir de un ::after y ::before (Mis favoritos para trabajar jeje). Les damos a ambos el tamaño exacto de su contenedor además les entregamos una position: absolute; y les decimos que tengan 0 en todas las posiciones, así se quedan donde queremos, en 0. El box-sizing: border-box; evita que el objeto crezca de formas que no queremos para que todos los tamaños sean a partir del borde entonces siempre va a tener 100px de ancho y de alto sin importar cuanto de borde les pongamos. Lo último de esto es hacer circular los dos objetos por eso le decimos border-radius: 100%;, todavía no vemos nada porque los objetos no tienen características visibles…
Para poder verlos para eso son el border del ::before, ahora, el ::after es otra cosa, el border: solid 10px transparent; hace que nuestro objeto tenga un borde que no se puede ver pero con un ancho de 10px pero el border-top: solid 10px #00aeef; hace que solamente el top del borde se vea y que la línea sea de un cuarto, si no se pone la primera orden de borde en la que lo hicimos transparente lo que va a suceder es que vamos a crear algo con los lados puntiagudos.
Para poder activar la animación usamos: animation: vuelta 1s infinite linear; donde vuelta es el nombre de la animación, 1s es el tiempo que va a tardar la animación, infinite es para que se repita de manera infinita y linear es para que lo haga sin aceleraciones que se producen de manera automática.
El movimiento
Para mover una animación se necesitan fotogramas clave igual que en vídeo pero nosotros lo vamos a escribir…
@keyframes vuelta{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
Para hacer fotogramas clave se empieza por @keyframes vuelta{} establecer el nombre del movimiento igual que en la animación animation: vuelta 1s infinite linear; eso es lo que une el objeto a animar con el movimiento. Como cualquier animación el movimiento tiene que partir de algo y terminar en algo, por eso establecemos que va de 0% a 100% (También se podría establecer de from a to). Para no hacer una animación compleja lo que hicimos fue una rotación que empieza de 0 grados (degrees por eso deg) hasta 360 grados, nosotros le animamos una rotación, pero el infinite de la animación va a hacer que tengamos todos los necesarios.
Esto es lo que llevamos:
Descargar el ejemplo: html y css
Requiem
El final del proceso requiere de contenido que haga un poco pesado nuestro html, yo opté por bajar un VIDEO de Pexels que es una de muchas páginas de stock gratuito y lo agregué de la siguiente forma:
<video poster="vela.png" preload controls>
<source src="video.mp4" type="video/mp4">
</video>
El atributo de preload obliga al navegador a que cargue todo el vídeo desde el inicio y así le damos todo el peso.
Pero faltan dos partes una en css y el Javascript que va a quitar el cargador cuando todo el contenido esté listo.
css
.cargador.listo {
visibility: hidden;
opacity: 0;
}
.cargador.listo {
visibility: hidden;
opacity: 0;
}
Esta clase no va a funcionar hasta que sea agregada al html a través del Javascript pero lo que propone es que el objeto tenga una visibilidad: hidden; además de darle transparencia para que no se vea.
Javascript
document.body.onload = function(){
setTimeout(function() {
var cargador = document.getElementById('cargador');
if( !cargador.classList.contains('listo') )
{
cargador.classList.add('listo');
}
}, 1000)
}
El Javascript se tiene que poner dentro de las etiquetas
<script></script>antes del cierre del</body>.
Lo primero que hacemos es decirle document.body.onload, esto es lo que le dice al Javascript que cuando el documento (document) esté cargado (onload) se va a ejecutar lo siguiente… Y lo siguiente es una function(){}, adentro de la función se establece un setTimeout() que es un método en que que se le establece un tiempo fuera para que no ejecute por un tiempo determinado en milisegundos, eso quiere decir va a esperar en nuestro caso 1000 que es igual a un segundo.
En la variable cargador se guarda la selección por la identidad cargador desde el documento, para poder utilizarla luego en la estructura de control if(){}. La pregunta sería: Sí cargador no contiene la clase listo (!cargador.classList.contains(‘listo’)) entonces se va a ejecutar lo que está en medio de las llaves. Que es agregarle a la lista de clases “listo” (cargador.classList.add(‘listo’);)
Descargar el ejemplo: html y css
Si bien este fue un tutorial bastante chico hay una cantidad grande de información en él que sabiendo extrapolar se puede usar para otras cosas, espero que les haya gustado… Enjoy!
