Generador de Loaders CSS
Genera animaciones de carga CSS puro al instante. Elige spinner, puntos, barras o pulso — copia el CSS y HTML y úsalos en cualquier proyecto.
① Elige un tipo de loader ② Ajusta tamaño, color y velocidad ③ Copia CSS y HTML
Color
#C9B89A
Velocidad
Cómo funciona
Cada loader se construye solo con animaciones CSS — sin JavaScript ni imágenes. El spinner usa rotación de borde, los puntos usan rebote de escala, las barras usan scaleY, y el pulso usa escala con opacidad.
Control de velocidad
Lento = 1,5s, Normal = 0,8s, Rápido = 0,4s de duración de animación. Los puntos y las barras usan animation-delay en los elementos hijos para crear el efecto escalonado.
Listo para usar
Copia los fragmentos CSS y HTML, pégalos en tu proyecto y el loader funciona inmediatamente. Sin dependencias, sin frameworks requeridos.
Salida CSS
.loader {
width: 48px;
height: 48px;
border: 6px solid #c9b89a33;
border-top-color: #c9b89a;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
Salida HTML<div class="loader"></div>
¿Qué es una animación de carga CSS?
Una animación de carga CSS — también llamada spinner CSS o loader CSS — es un patrón de UI que indica datos pendientes sin requerir JavaScript o GIF. El CSS moderno permite animaciones complejas usando @keyframes con transform, opacity y propiedades border. Patrones comunes incluyen spinners (borde rotativo), puntos (círculos rebotantes), barras (rectángulos escalados) y pulso (círculo respirante).
Preguntas frecuentes
Un loader CSS es un indicador de carga puramente visual implementado con animaciones CSS y @keyframes — sin JavaScript ni assets de imágenes. Señala a los usuarios que el contenido se está cargando.
El spinner usa un elemento circular con un borde transparente excepto por un lado de color. Una animación @keyframes rotate(360deg) gira el elemento continuamente.
El loader de puntos muestra tres círculos que cambian de escala en secuencia usando la transformación scale(), creando un efecto de rebote. El loader de barras muestra cuatro rectángulos que escalan verticalmente con scaleY().
Para puntos y barras, cada elemento hijo tiene un valor animation-delay diferente. Esto significa que cada elemento inicia su ciclo de animación en un momento diferente, creando la apariencia en cascada.
Las animaciones CSS con transform y opacity son aceleradas por GPU en todos los navegadores modernos. Evita animar propiedades como width, height que provocan reflow de diseño.
Envuelve el loader en un contenedor con display:flex; justify-content:center; align-items:center; Para una superposición de página completa, agrega position:fixed; inset:0.
Las animaciones CSS @keyframes son soportadas en todos los navegadores modernos (Chrome, Firefox, Safari, Edge) desde 2013.