Page Loader con jQuery y la propiedad animation de CSS

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

Código SCSS (Sass)

Lo podréis convertir a código CSS desde el ejemplo que está subido en jsfiddle

Javascript (jQuery)

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.

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.