Generador de loaders CSS

¿Qué es Generador de loaders CSS?

El Generador de Loaders CSS es una herramienta gratuita en el navegador para diseñadores web y desarrolladores front-end que necesitan un indicador de carga en CSS puro sin añadir una librería. Elige entre cinco estilos -spinner, anillo, puntos, barras y pulso- y controla el tamaño en píxeles, el color principal, la velocidad de un ciclo de animación en segundos, el grosor del trazo y la cantidad de puntos o barras. Una vista previa se anima mientras editas, y el marcado HTML junto con un bloque de estilo CSS con @keyframes se actualiza al instante para que lo pongas directamente en una página. Úsalo para botones, loaders de página, estados esqueleto y marcadores asíncronos, o para aprender cómo la animación CSS y @keyframes impulsan cada efecto.

Cómo usar Generador de loaders CSS

1. Elige un estilo de loader: Spinner, Anillo, Puntos, Barras o Pulso.
2. Ajusta el tamaño en píxeles y elige un color con la muestra o escribiendo un valor.
3. Ajusta la velocidad de la animación en segundos para un ciclo completo.
4. Abre Ajustes para cambiar el grosor del trazo (spinner y anillo) o el número de puntos o barras.
5. Observa cómo se anima la vista previa y copia el HTML y CSS generados con el botón de copiar.

Ejemplos

Estilo: Spinner, tamaño 48px, color #4f86f7, velocidad 1s, grosor 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Estilo: Puntos, tamaño 48px, color #9333ea, velocidad 1s, cantidad 3

<div class="dd-loader"><div></div><div></div><div></div></div> con animation-delay escalonado para que los puntos escalen en onda.

Preguntas frecuentes

¿Qué estilos de loader hay disponibles?

Cinco: Spinner (un arco que gira), Anillo (un anillo giratorio más grueso), Puntos (puntos que escalan en onda), Barras (barras que se estiran arriba y abajo) y Pulso (un solo círculo que late). Cambia con el menú de estilo y la vista previa y el código se actualizan al instante.

¿Qué hacen los controles de tamaño, color y velocidad?

El tamaño define las dimensiones del loader en píxeles, el color define el color principal (usa el selector o escribe cualquier color CSS) y la velocidad es la duración de un ciclo de animación en segundos. El grosor controla el trazo del spinner y el anillo, mientras que la cantidad controla cuántos puntos o barras aparecen.

¿El CSS generado es CSS puro sin JavaScript?

Sí. El fragmento es HTML simple más un bloque <style> que usa animación CSS y @keyframes, así que funciona sin ningún JavaScript ni librería externa. Pégalo en tu página y funciona por sí solo.

¿Por qué el grosor y la cantidad no cambian todos los estilos?

El grosor solo afecta al spinner y al anillo (que dibujan un borde), mientras que la cantidad solo afecta a puntos y barras (que renderizan varios elementos). Los demás estilos los ignoran, así que la salida queda limpia para el estilo que elegiste.

¿Se sube algo a un servidor?

No. El loader y su CSS se construyen por completo en tu navegador con matemáticas locales de cadenas; ningún ajuste, color ni código se envía nunca a un servidor, por lo que funciona sin conexión y mantiene tu trabajo privado.