Herramienta gratis

Generador de Loaders CSS

Spinners y loaders animados solo con CSS: elige el tipo, ajusta color, tamaño y velocidad, y copia el HTML + CSS.

<div class="loader"></div>

.loader {
  width: 48px;
  height: 48px;
  border: 4px solid #7c3aed33;
  border-bottom-color: #7c3aed;
  border-radius: 50%;
  display: inline-block;
  animation: loader-rotation 1s linear infinite;
}

@keyframes loader-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Hecho por

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.

GitHubLinkedInInvitar a un café
Contáctame

Un buen indicador de carga mejora la percepción de velocidad de cualquier web o aplicación. Estos loaders están hechos exclusivamente con animaciones CSS (keyframes), sin JavaScript, sin GIFs y sin librerías externas: pesan unos cientos de bytes, se ven nítidos en pantallas retina y respetan la paleta de tu proyecto porque defines el color exacto. Elige entre anillo clásico, doble anillo, puntos rebotando, barras tipo ecualizador, pulso u ondas expansivas, ajusta las variables y copia el fragmento HTML + CSS listo para incrustar.

Características

  • ✓6 tipos de animación distintos
  • ✓CSS puro sin JavaScript ni imágenes
  • ✓Color, tamaño y duración ajustables
  • ✓Vista previa en vivo del resultado
  • ✓HTML + CSS listos para pegar

¿Cómo generar un loader CSS?

  1. 1

    Elige el tipo de animación

    Seis estilos: anillo, doble anillo, puntos, barras, pulso u ondas.

  2. 2

    Ajusta color, tamaño y velocidad

    La vista previa se actualiza al instante.

  3. 3

    Copia el código

    El botón copia el HTML y el CSS juntos.

  4. 4

    Pégalo en tu proyecto

    Añade el CSS a tu hoja de estilos y el div donde toque.

Preguntas frecuentes

¿Por qué usar CSS en vez de un GIF o Lottie?

Los loaders CSS no añaden peticiones de red, escalan sin perder calidad y heredan tu paleta de color. Para animaciones muy complejas Lottie sigue siendo mejor opción; para un spinner, CSS es más ligero.

¿Puedo hacer que se respete prefers-reduced-motion?

Sí, envuelve la animación en @media (prefers-reduced-motion: reduce) { .loader { animation: none; } } y muestra un texto estático «Cargando...» para usuarios sensibles al movimiento.

¿Funciona en todos los navegadores?

Las keyframes CSS tienen soporte universal desde hace años, incluyendo navegadores móviles. No se usa ninguna propiedad experimental.

Herramientas relacionadas

Generador de Glassmorphism

Efecto cristal con blur y transparencia.

Generador de Gradientes CSS

Gradientes linear, radial y cónico con presets.

Minificar Código

Minifica HTML, CSS y JS.

Clip Path Maker

Formas CSS con vértices arrastrables.

Incrusta Generador de Loaders CSS en tu web

Integra Generador de Loaders CSS en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/css-loader-generator"
  width="100%"
  height="700"
  frameborder="0"
  title="Generador de Loaders CSS — miguelacm.es"
></iframe>
Ver embed en nueva pestaña →
Ver código en GitHub