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. 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 — Andrés (@AndreusCafe) November 27, 2020 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º.