Generador de Loaders CSS

¿Qué es esta herramienta?

Un loader CSS es un pequeño elemento animado — un anillo giratorio, puntos que rebotan, un círculo que pulsa o una barra de progreso en movimiento — usado para mostrar que el contenido se está cargando, sin bucle de animación en JavaScript y sin necesidad de imagen o GIF. Se construye con un par de reglas CSS más un bloque @keyframes que define cómo se mueve el elemento a lo largo del tiempo.

Esta herramienta genera cuatro patrones de loader comunes con CSS real y funcional: un spinner giratorio basado en bordes, tres puntos que rebotan en secuencia, un círculo que pulsa hacia adentro y afuera, y una barra con un relleno deslizante. Ajusta tamaño, color y duración en la vista previa en vivo, y luego copia el CSS generado junto con el elemento HTML mínimo al que se aplica.

Fuente: CSS Animations Level 1, W3C — la especificación que define @keyframes y las propiedades de animación con las que se construyen estos loaders.

¿Por qué utilizarlo?

• La vista previa en vivo se anima en tiempo real al cambiar estilo, tamaño, color o velocidad — ves exactamente lo que vas a usar.
• Genera el CSS completo, incluyendo el bloque @keyframes, no solo un fragmento que tienes que terminar tú mismo.
• También genera el HTML exacto que espera el CSS, sin adivinar nombres de clases o estructura de elementos.
• Cuatro patrones de animación distintos (spinner, puntos, pulso, barra) cubren los casos de uso más comunes de estados de carga.
• Animación CSS pura — sin JavaScript, sin archivos de imagen, más ligera y fluida que un GIF animado.
• Funciona completamente en tu navegador, gratis, sin registro.

Cómo utilizarlo

1. Elige un estilo de loader: anillo giratorio, puntos que rebotan, círculo pulsante o barra de progreso.
2. Arrastra el control de tamaño para agrandar o achicar el loader.
3. Elige un color — se convierte en el color de acento del loader (el borde giratorio, los puntos o el relleno de la barra).
4. Ajusta la velocidad para que la animación sea más rápida o lenta; la mayoría de los loaders de interfaz se ven mejor entre 0.6s y 1.5s por ciclo.
5. Copia el CSS generado en tu hoja de estilos y pega el fragmento HTML donde necesites que aparezca el loader.

Ejemplo

Entrada

Estilo: anillo giratorio · Tamaño: 40px · Color: naranja · Velocidad: 1.0s

Resultado

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Un spinner de anillo clásico: un círculo con un borde casi transparente en tres lados y un color sólido en el cuarto, rotando continuamente con una animación lineal e infinita.

Por qué usar loaders CSS en vez de GIFs animados

Los spinners GIF animados fueron la opción por defecto durante años, pero hoy un loader CSS es casi siempre mejor: son unos cientos de bytes de texto en vez de un archivo de imagen binario, escalan a cualquier tamaño sin pixelarse porque se dibujan con bordes y transforms, y su color se puede cambiar al instante con un solo valor CSS en vez de reexportar una imagen nueva.

Los cuatro estilos aquí — spinner, puntos, pulso, barra — también son los que más aparecen en interfaces reales, desde estados de carga en botones hasta overlays de página completa. Cada uno solo cambia transform y opacity en sus keyframes, lo que los navegadores pueden animar suavemente en la GPU sin afectar el resto de la página.

Elegir el estilo según la situación

• Anillo giratorio: la opción más neutral y de propósito general — funciona bien dentro de botones y estados de carga en línea pequeños.
• Puntos que rebotan: se percibe más ligero y juguetón; común en indicadores de 'escribiendo...' en chats y esperas cortas.
• Círculo pulsante: bueno para un indicador de carga de un solo elemento o como un punto de estado 'activo/en vivo'.
• Barra de progreso: sugiere avance y suele esperarse en cargas de página o procesos de varios pasos, incluso sin un porcentaje exacto.

Usar el loader en tu proyecto

Pega el CSS generado en tu hoja de estilos una sola vez, luego reutiliza el fragmento HTML donde necesites un estado de carga — dentro de un botón mientras se envía un formulario, sobre una tarjeta mientras se cargan datos, o centrado en un overlay de página completa. Como la animación es CSS puro, activarla o desactivarla es tan simple como agregar o quitar el elemento del DOM, o esconderlo con display: none.

→ Generador de Box Shadow · Minificador de CSS

Preguntas frecuentes