Generador de loaders CSS
Elige una animación de carga, ajústala al color, tamaño y velocidad de tu marca y copia unas pocas líneas de HTML y CSS. CSS puro: sin imágenes, GIF, archivos SVG ni JavaScript.
Última actualización:
Cómo usar Generador de loaders CSS
- Elige un loader en la galería; cada estilo se muestra en vivo con tu color actual.
- Ajusta el color y, en los estilos de anillo, el color de la pista (o déjalo en Auto).
- Ajusta el tamaño y la velocidad con los controles deslizantes y revisa la vista previa grande sobre fondo claro u oscuro.
- Cambia el nombre de la clase si lo necesitas, por ejemplo .btn-spinner.
- Copia el HTML y el CSS en tu página, o descarga el archivo de demostración.
Cómo funciona un spinner CSS
Casi todos los loaders CSS son un elemento (a veces con algunos <span> hijos o pseudoelementos ::before/::after) más una regla @keyframes que se repite sin fin. El clásico spinner de anillo es solo un círculo con un borde claro y un lado de color, girado 360°:
.loader {
width: 48px;
height: 48px;
border: 6px solid #d5e1db;
border-top-color: #2f6b4f;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }Los loaders de varios puntos dan a cada punto una propiedad personalizada como style="--i: 2" y los escalonan con animation-delay: calc(var(--i) * 0.15s), así una sola regla keyframes mueve todos los puntos.
Cómo elegir el loader adecuado
| Situación | Buena opción | Tamaño típico |
|---|---|---|
| Dentro de un botón o campo | Anillo, anillo doble, puntos que rebotan | 16 a 20px |
| Carga de una tarjeta, tabla o gráfico | Anillo, anillo degradado, círculo de puntos, barras | 32 a 56px |
| Página completa o inicio de la app | Onda, pulso, cuadrado que se transforma | 56 a 96px |
| Indicador de "escribiendo" en un chat | Puntos en ola o que se desvanecen | 24 a 36px |
| Parte superior de la página o subida de archivos | Barra de progreso (indeterminada) | Ancho completo, de 3 a 6px de alto |
- Retrasa su aparición: espera de 300 a 500 ms antes de mostrar un spinner, para que las respuestas rápidas nunca hagan parpadear un loader.
- Mantén tu marca: usa tu color principal para la parte que se mueve y un tono pálido del mismo para la pista.
- ¿Quieres un movimiento personalizado? Crea tus propios keyframes en el Generador de animaciones CSS o ajusta la curva con el Generador de Cubic Bezier.
Preguntas frecuentes
¿Por qué usar un loader en CSS puro en lugar de un GIF?
Un loader CSS ocupa unos cientos de bytes, se ve nítido a cualquier tamaño, cambia de color con un solo valor y se anima con fluidez porque usa transform y opacity, que el navegador anima en la GPU. Un GIF pesa más, se ve borroso al escalarlo y está limitado a 256 colores.
¿Cómo muestro y oculto el loader?
Añade el elemento del loader mientras se carga el contenido y quítalo (o pon el atributo hidden) cuando lleguen los datos. Para una superposición a pantalla completa, envuélvelo en un contenedor fijo con display: grid; place-items: center; inset: 0.
¿Cómo hago accesible un loader?
Dale al elemento role="status" y un aria-label como "Cargando" para que los lectores de pantalla lo anuncien; el HTML generado ya lo incluye. Quítalo de la página cuando termine la carga para que se borre el estado.
¿Puedo poner el spinner dentro de un botón?
Sí. Pon un tamaño de aproximadamente 1em (de 16 a 20px), usa currentColor o blanco como color y añade display: inline-block con vertical-align: middle. Desactiva el botón mientras gira para que no se pulse dos veces.
¿Cómo cambio la velocidad más adelante?
Edita la duración de la animación en el CSS generado: un valor más pequeño gira más rápido. La mayoría de los spinners resultan naturales con 0.6 a 1.2 segundos por vuelta.
¿Qué hace la opción de movimiento reducido?
Añade una regla @media (prefers-reduced-motion: reduce) que hace la animación varias veces más lenta para quienes han pedido a su sistema operativo minimizar el movimiento, sin dejar de indicar que algo está pasando.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.