Cómo hacer un spinner con HTML y CSS

¿Quieres aprender a crear un loader animado con HTML y CSS sin JavaScript? 🚀 En este tutorial creamos desde cero un spinner de carga circular con degradado de colores, utilizando únicamente HTML y CSS.

En el código aprenderás a utilizar:

✅ HTML semántico para estructurar el loader.
✅ CSS Variables para reutilizar colores y tamaños.
✅ Flexbox para centrar el elemento en pantalla.
✅ border-radius para crear la forma circular.
✅ linear-gradient() para crear el degradado.
✅ Pseudo-elementos con ::after para crear el interior del loader.
✅ @keyframes para crear la animación de rotación.
✅ animation para controlar velocidad y movimiento.
✅ prefers-reduced-motion para mejorar la accesibilidad.

El resultado es un loader CSS moderno, ligero y responsive, perfecto para páginas web, aplicaciones, dashboards, formularios y proyectos frontend.

💻 Tecnologías utilizadas:

HTML5
CSS3
CSS Variables
Flexbox
CSS Animations
Pseudo-elementos

No necesitas JavaScript para crear esta animación.

Si estás aprendiendo HTML y CSS, este ejemplo es una buena forma de practicar animaciones, pseudo-elementos, variables CSS y Flexbox mientras construyes un componente que puedes reutilizar en tus proyectos.

🎥 Vídeo completo:

🔗 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. Desde los secretos de los números primos hast 📢 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