LOADER DE CÍRCULOS con HTML y CSS

En este vídeo puedes ver el funcionamiento de un loader animado de 9 círculos desarrollado únicamente con HTML y CSS puro. La animación crea un efecto de expansión secuencial mediante @keyframes, pseudoelementos y variables CSS, logrando una pantalla de carga moderna y elegante sin utilizar JavaScript.

Este tipo de componente es perfecto para aplicaciones web, dashboards, landing pages y cualquier proyecto frontend que necesite una experiencia de usuario más atractiva.

Características del proyecto
✅ HTML5 y CSS3 puro
✅ Sin JavaScript
✅ Animación de carga fluida y moderna
✅ Uso de CSS Grid para la distribución de los elementos
✅ Variables CSS (:root) para una fácil personalización
✅ Diseño responsive y ligero

Tecnologías utilizadas
HTML5
CSS3
CSS Grid
CSS Variables
CSS Animations
CSS Keyframes
Pseudo-elementos (::before y ::after)
Funcionalidades

🔵 Loader compuesto por 9 círculos animados
🎨 Colores fácilmente personalizables mediante variables CSS
⚡ Animación secuencial con distintos tiempos de retraso (animation-delay)
📱 Compatible con dispositivos móviles y navegadores modernos

Aplicaciones
Pantallas de carga (Loading Screens)
Aplicaciones SPA
Dashboards
Interfaces de usuario (UI)
Proyectos React, Vue o Angular
Landing Pages y sitios corporativos

🔗 Código HTML:

🔗 Código CSS:

🔍MENTES GEEKS🔍
¿Te apasionan las matemáticas, la informática y los rompecabezas? ¡Entonces este es el lugar perfecto para ti! 🌟

En este canal, desentrañamos los misterios de los números, exploramos el poder de la programación y nos sumergimos en los desafíos más intrigantes de los rompecabezas. Des 📢 Sígueme en todas las redes para no perderte nada:
Youtube: www.youtube.com/channel/UCW7d4aS6_M7YLmNnNi_L9zQ?sub_confirmation=1
Instagram: @mentesgeeks010
Twitter: @MundoMate13601
TikTok: @mentesgeeks10
Wuolah: wuolah.com/profile/MentesGeeks?referral=Sotsnia3
Blog: mentesgeeks10.blogspot.com
GitHub: github.com/mentesgeeks
Pinterest: ar.pinterest.com/mentesgeeks10/
Codepen: codepen.io/mentesgeeks

+ Leer más