Preferencias de privacidad

Gestión de consentimientos

Cookies utilizadasObligatorias

He leído y acepto la Política de privacidad.

Obligatorias

Estas cookies son necesarias para el funcionamiento del sitio web y no pueden ser desactivadas en nuestros sistemas. En general, sólo se establecen en respuesta a acciones realizadas por usted que equivalen a una solicitud de servicios, como establecer sus preferencias de privacidad, iniciar sesión o rellenar formularios.

Cookies utilizadas Obligatorias

PHPSESSID, Cadabullos_Diseño_WebonlineCookieAnalitycs, Cadabullos_Diseño_WebonlineCookie, id_usuario_tienda, marca_ti

Analíticas

Estas cookies nos permiten medir el número de visitas y conocer las fuentes de tráfico. Nos ayudan a saber qué páginas son las más y las menos populares y a conocer cómo se mueven los visitantes por el sitio. Toda la información que estas cookies recolectan es agregada y por lo tanto anónima. Si no autoriza estas cookies, no sabremos cuándo ha visitado nuestro sitio.

Cookies utilizadas

Cómo anular consentimiento
_ga,_gid,_gat,

google.com

_ga,_gid,_gat,
¡Atención! Este sitio usa cookies y tecnologías similares. Si no cambia la configuración de su navegador, usted acepta su uso
Opciones
Ícono menú móvil
Atención al cliente

Ejemplos de cómo realizar un cargando animado (loader...) usando sólo CSS.

Ejemplos de cómo realizar un cargando animado (loader...) usando sólo CSS.
26/05/2022
Admin

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.

¿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.


Etiquetas: Diseño Web CSS
Valoraciones
[Votos: 9 Promedio: 5]

Post Relacionados

Comentarios

icono persona comentarios
Pedro
31/05/2022 08:05 horas
#1

Me encantan ?

Admin
Admin
02/06/2022 01:06 horas

Muchas gracias Pedro, así da gusto!!

Deja tu comentario

Para enviar un comentario debes aceptar nuestra política de privacidad.

  • Responsable de los datos: Cadabullos Diseño Web
  • Finalidad: Gestión y moderación de comentarios.
  • Legitimación: Tu consentimiento expreso. No se cederán datos a terceros salvo obligación legal.
  • Destinatario: Cadabullos Diseño Web
  • Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.
*
*
*