Como crear un cargador de página utilizando sólo jQuery y la propiedad animation de CSS.
Anteriormente vimos como crear un sencillo cargador de página utilizando una imagen de precarga usando jQuery y CSS.
Ahora lo complicaremos un poco más y usaremos la propiedad animation de CSS para no tener que depender del uso de una imagen.
Código HTML
|
1 2 3 4 |
<div class="outer-loader"> <div class="inner-loader-css"> </div> </div> |
Código SCSS (Sass)
Lo podréis convertir a código CSS desde el ejemplo que está subido en jsfiddle
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.outer-loader { width: auto; height: 100vh; display: flex; align-items: center; justify-content: center; // page loader full css .inner-loader-css { border: 16px solid hsl(0, 0%, 5%); border-top: 16px solid hsl(0, 0%, 43%); border-radius: 50%; width: 100px; height: 100px; animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } } |
Javascript (jQuery)
|
1 2 3 |
$(window).on('load', function() { $('.outer-loader').delay(1000).fadeOut('slow'); }); |
Resultado
El resultado final se puede comprobar en jsfiddle
animation
La propiedad animation nos permite animar transiciones entre un estilo CSS y otro.
Para crear estas secuencias de animación usaremos @keyframes que son la secuencia de fotogramas de la animación y donde podremos configurar el ritmo, duración y otros detalles.
Cada uno de estos fotogramas describe un momento de la secuencia de la animación, siendo sus valores entre 0 y 100.
animation-name: spin
indica el nombre de la animación que será declarado en la regla @keyframes encargada de cada uno de los fotogramas de la animación.
animation-duration: 1.5s
El tiempo que se consume en completar un ciclo en segundos (s) o milisegundos (ms)
animation-timing-function: linear
El ritmo de la animación en general o de cada keyframes (fotogramas). En el loader sera linear (misma velocidad) en toda la animación.
Algunos valores son:
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
animation-iteration-count: infinite
Cantidad de veces que se repite cada ciclo de animación. Por defecto será uno y podremos especificar valores decimales (0.5) para ejecutar parte de la animación.
animation-direction: normal
indica si la animación debe retroceder hasta el fotograma de inicio para finalizar la secuencia.
Otros valores son: normal, reverse, alternate, alternate-reverse
- alternate: una vez llegado al final retrocede hasta el principio.
- reverse: animación en dirección contraria.
- alternate-reverse: primero hacia atrás y luego hacia adelante.
animation-delay: 1.5s
Tiempo de espera hasta que se vuelva a iniciar el comienzo de la animación.
animation-play-state:
Nos permitirá comprobar si una animación esta en ejecución o en pausa.
- running: animación ejecutandose.
- paused: animación en pausa.
animation-fill-mode: none
El modo en el que se aplicarán los estilos
- none: no se aplicarán estilos ni antes ni después de su ejecución.
- fordwards: Permanecerán los estilos del último fotograma.
- backwards: Se aplicarán los estilos del primer fotograma una vez finalizada la animación.
- both: Se extienden en ambas direcciones.
