Hace años era muy típico usar imágenes (gifs) en las pre-cargas de las webs, etc.. para crear ese efecto de «cargando…»
A continuación un ejemplo para realizar un efecto loading circular usando solo CSS. En este caso a un solo elemento con clase «loader-circular».
.loader-circular { position: relative; height: 60px; width: 60px; margin: 0 auto; border-radius: 50%; background-color: #eee; animation: animacion .6s linear 0s infinite; } .loader-circular:before, .loader-circular:after { content: ''; display: block; position: absolute; } .loader-circular:before { border-radius: 0 30px 30px 0; height: 60px; width: 50%; top: 0; right: 0; background-image: linear-gradient(#eee, #aaa); } .loader-circular:after { border-radius: 50%; height: 50px; width: 50px; top: 50%; left: 50%; background-color: #fff; transform: translate(-50%, -50%); } @keyframes animacion { to { transform: rotate(360deg); } }
Resultado:
Este es solo un ejemplo para mostrar lo fácil que es crearlo solo CSS… puedes editar este código a tu gusto (para modificar su posición, tamaño, colores, velocidad, etc)
Agradezco tu comentario 🤘