Generador de Loaders CSS
El generador de loaders CSS crea animaciones de carga en CSS puro con seis estilos (spinner, puntos que rebotan, anillo, pulso, barras y anillo doble), con tamaño, color, velocidad y grosor ajustables, y genera tanto el CSS como el HTML.
Acerca de esta herramienta
El generador de loaders CSS crea animaciones de carga en CSS puro con seis estilos (spinner, puntos que rebotan, anillo, pulso, barras y anillo doble), con tamaño, color, velocidad y grosor ajustables, y genera tanto el CSS como el HTML.
Cómo se usa
- Elige un estilo de loader.
- Ajusta el tamaño, el color, la velocidad y el grosor.
- Revisa la vista previa en vivo.
- Haz clic en Copiar CSS + HTML y pega ambos en tu página.
Datos útiles
- Los loaders en CSS puro no necesitan imágenes, GIF ni JavaScript.
- Los spinners giran con @keyframes y transform: rotate(), que es eficiente de animar.
- El marcado es un único elemento, o unos pocos elementos hijos para los puntos y las barras.
- Añade role="status" y una etiqueta visualmente oculta como «Cargando…» para que los lectores de pantalla anuncien el loader.
- Considera ralentizar o pausar los loaders con prefers-reduced-motion.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo hago un spinner de carga en CSS?
Dale a un elemento cuadrado un borde con un lado de color, border-radius: 50% y una animación @keyframes de rotación, o copia uno de este generador.
¿Los loaders CSS son mejores que los GIF?
Normalmente sí: pesan menos, se ven nítidos a cualquier tamaño y puedes cambiar su color y velocidad con CSS.
¿Cómo hago que un loader sea accesible?
Envuélvelo en un elemento con role="status" e incluye un texto oculto como «Cargando…» para que las tecnologías de asistencia puedan anunciarlo.
¿Cómo centro el loader en la página?
Colócalo en un contenedor con display: flex; justify-content: center; align-items: center;.