En el post de hoy, os vamos a mostrar como utilizar la propiedad animation para realizar los típicos cargando... (loaders) usando sólamente CSS.
Tabla Contenidos
¿Qué es un loader o spinner y cuándo utilizarlo?
Se suele utilizar un loader o cargando cuando quieres indicar al usuario que tenga un poco de paciencia, ya que el sistema está realizando tareas que pueden llevarle un poquito de tiempo más de lo habitual.
Si el sistema está realizando tareas pero el usuario no lo sabe, podría malinterpretar la situación y realizar acciones que no queremos, como abandonar nuestro sitio web, volver a enviar un formulario, etc..
No abuses de este tipo de elementos a no ser que sean estrictamente necesario. Se trata de mejorar la experiencia de usuario, no de empeorarla.
Ejemplos de Cargando usando sólo con CSS
En este post vamos a mostraros 4 ejemplos de loaders de diferentes estilos usando sólo CSS, que son los que más nos han gustado.
Una vez hayas comprendido el funcionamiento de la propiedad "animation" de CSS, te resultará muy fácil generar tu loader personalizado.
1.- Cargando... modo rueda
Es el cargando más sencillo de realizar, una simple capa nos bastará para realizar este efecto.
Este loader es el más común y más tradicional así que si quieres algo más innovador sigue más abajo en el post.
Si no tienes muchos conocimientos de HTML y CSS este es el ideal para practicar o para usar en tus primeros proyectos.
2. Cargando... con pelotas
Hace unos días en Instagram, vi un post de juliocoldes que me encantó y que en realidad fue el que me llevó a escribir este post.
El ejemplo es bastante sencillo de realizar, consiste en 3 capas que animaremos con la propiedad animation. utilizando las propiedades translate y scaleX, una para su movimiento vertical y la otra para producir el efecto de deformación de la pelota al rebotar con el suelo.
Las dos ultimas capas llevan un retardo en el comienzo de la animación para que no boten al mismo tiempo. Este retrase se configura con la propiedad animation-delay de CSS.
A partir de este loader, es como nace la idea del ejemplo 3 de este post.
3. Cargando... con cajitas
Como os comentaba en el ejemplo anterior, el cargando con cajitas, surge del loader con pelotas.
Lo que hemos hecho es: añadir una capa más al código HTML, quitarle el border-radius a las capas para que no sean redondas, cambiar la acción de la animación y ajustar los tiempos de retardo.
Si quieres dejarlo con las esquinas redondeadas, también puedes hacerlo, queda muy chulo.
El resultado obtenido es uno de los que más nos gusta.
4. Loader con barra - Modo Kit (coche fantástico)
Este loader... me ha llamado mucho la atención y fácilmente podría ser la animación de cuando hablaba Kit del coche fantástico.
La implementación de este ejemplo ya es un poco más complicada si tus conocimiento de HTML5 y CSS son reducidos.
Idea sacada de esta página web.
Esperamos que os hayan gustado estos efectos que hemos recopilado e implementado con todo el cariño del mundo, y que os sirvan para utilizar en vuestros proyectos o simplemente para ampliar vuestros conocimientos.
¿Qué loader te ha gusta mas?
¿Conoces aún otro ejemplo que creas que debemos añadir a esta pequeña recopilación? Puedes enviárnoslo en los comentarios o en nuestro formulario de contacto, valoraremos su posible inclusión en este post con su correspondiente referencia. No te ofendas si no lo añadimos, tal vez no cumpla los criterios que creemos que debe tener.
Os dejamos también el vídeo de Youtube de promoción del post, por si queréis compartirlo o subscribiros al canal, aunque acabamos de empezar, iremos subiendo contenido que creemos que os va a resultar interesante.
