Vengo a contarles cómo hice una barra de carga (o loader) con animaciones CSS.
La iniciativa surgió hace unas semanas en Twitter a partir del challenge de @AndreusCafe:
Ustedes saben que me encanta CSS, y por sobre todo las cosas creativas.
— Andrés (@AndreusCafe) November 27, 2020
Así que, este desafío consiste en hacer un pequeño loader en CSS.
No hay definiciones ni requerimientos técnicos. Simplemente un pequeño componente gráfico de carga en CSS; uds eligen el estilo. pic.twitter.com/rqsivfSp3d
Me surgió la idea de hacer un spinner y barra de progreso a la vez, ya que no me decidía por cuál opción ir.
El desafío fue escribir los keyframes para que la animación sea cíclica y lo más fluida posible. Tomé lápiz y papel para esquematizar las líneas de tiempo y pude tener una visión de lo que quería lograr y lo que debería plasmar en mi código.
Por un lado, tenemos la animación rotate que hace girar la barra. Primero espera, luego gira 180º, vuelve a esperar y vuelve a girar 180º. En este punto completó una vuelta completa y la animación vuelve a repetirse.
La animación load se encarga de controlar el ancho del pseudoelemento que está dentro de la barra. Primero el width crece de 0 a 100% y hace una pausa mientras se produce el giro. Después vuelve a ancho 0.
Ambas animaciones duran 6 segundos, la timing function es linear y la iteration count es infinite. En este CodePen está todo el código y el resultado final.
Comentarios
Publicar un comentario