Generador de loader CSS (cargando)
Toca un modelo, ajusta color, tamaño y velocidad y copia el código. Todos usan solo transform y opacity, que son ligeros para el navegador, y respetan a quien prefiere menos movimiento.
Cómo usarAnimaciones de carga en CSS
Disponible en: 
Generador de loader CSS (cargando): para qué sirve
Elige entre siete modelos de indicador de carga (anillo, anillo doble, puntos, barras, pulso, barra de progreso y cuadrado giratorio) y ajusta el color, el tamaño y la duración. Las animaciones usan solo transform y opacity.
El código incluye role=status, un texto oculto para lectores de pantalla y una animación más lenta para quien pide menos movimiento en el sistema.
Cómo usar
- Elige el modelo de loader.
- Ajusta color, tamaño y duración.
- Copia el HTML y el CSS.
Cuándo usar
- Pantallas de carga de sitios y sistemas.
- Reemplazar GIFs pesados de carga.
Preguntas frecuentes
¿Por qué usar CSS en vez de GIF?
El loader en CSS pesa pocos bytes, se ve nítido en cualquier pantalla, cambia de color con una variable y corre fuera del hilo principal del navegador, así que sigue fluido incluso mientras la página carga.
¿El loader es accesible?
El código incluye role="status" y un texto oculto (Cargando…) para lectores de pantalla. Con prefers-reduced-motion, la animación se vuelve mucho más lenta para quien pide menos movimiento.
¿Cuándo mostrar un loader?
Solo cuando la espera pase de aproximadamente medio segundo. Para esperas muy cortas, un loader que parpadea en la pantalla molesta más de lo que ayuda.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.