devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoría web

Generador de loaders y spinners CSS

Elige entre 13 spinners de carga solo con CSS, ajusta tamaño, colores, grosor y velocidad, y copia HTML y CSS ligeros y accesibles, sin imágenes, SVG ni JavaScript.

Actualizado el 

  



    
 Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

    
    
    

      
Cómo usar: Generador de loaders CSS
  1. Haz clic en un loader de la galería: cada muestra es interactiva.
  2. Ajusta tamaño, grosor, velocidad y colores; todas las muestras se actualizan a la vez.
  3. Cambia el nombre de la clase CSS si choca con tu proyecto.
  4. Copia el HTML y el CSS (o la versión de React) y pégalos en tu página.


¿Por qué un loader solo con CSS?


Un spinner en CSS ocupa unos cientos de bytes, no necesita petición de imagen ni JavaScript, escala con nitidez a cualquier tamaño y se puede cambiar de color con una sola variable. Cada loader de aquí se construye con un único elemento (y algunos spans para puntos y barras) y se anima con transform y opacity, lo que lo mantiene fluido incluso cuando el hilo principal está ocupado cargando tu app.


Personalización con variables CSS


El CSS generado expone --size, --color, --track, --thickness y --speed en la clase del loader, así que puedes crear una variante pequeña en blanco para botones sin copiar el CSS: <span class="loader" style="--size:18px;--color:#fff">.


Accesibilidad


  • El loader tiene role="status" y una etiqueta “Cargando…” oculta visualmente, para que los lectores de pantalla lo anuncien.
  • Con movimiento reducido activado, la animación se ralentiza en lugar de detenerse: un spinner congelado parece un fallo.
  • Muestra el loader solo tras ~300 ms; parpadear en peticiones rápidas se siente más lento que no mostrar nada.


¿Quieres una animación de carga personalizada? Créala en el generador de animaciones CSS y ajusta su easing con el generador de cubic-bezier.
También se busca como: loader css, spinner css, generador loader css, animación de carga css, spinner de carga css, css preloader, loading spinner css.
Herramientas que combinan con: Generador de loaders CSS
  • Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
  • Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
  • Generador de Keyframes CSS — Un editor visual para @keyframes.
  • Generador de efectos hover CSS — Diseña animaciones hover para botones, tarjetas, enlaces e iconos.
Preguntas frecuentes
¿Puedo usar estos loaders en proyectos comerciales?
Sí. El CSS se genera para ti, sin necesidad de licencia ni atribución.
¿Cómo muestro el loader solo mientras algo se carga?
Renderiza el elemento del loader mientras esperas y elimínalo (o añade el atributo hidden) cuando lleguen los datos. En React, renderízalo de forma condicional: {loading && <Loader />}.
¿Funcionará dentro de un botón?
Sí. Define un tamaño pequeño y un color que coincida con el texto del botón mediante las variables CSS, por ejemplo style="--size:16px;--thickness:2px;--color:currentColor".
¿Puedo instalar Generador de loaders CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de loaders CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

      
    

    
    
Herramientas relacionadas
localGenerador de animaciones CSSDiseña animaciones CSS sobre una línea de tiempo real de keyframes. Empieza desde más de 50 presets,…localGenerador Cubic BezierDa forma a una curva de easing arrastrando dos puntos y compárala con los easings estándar. ¿Necesitas…localGenerador de Gradientes CSSDiseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un…localGenerador de Box ShadowApila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre…localGenerador de Keyframes CSSUn editor visual para @keyframes. Añade keyframes en una línea de tiempo, define transformaciones,…localGenerador de efectos hover CSSDiseña animaciones hover para botones, tarjetas, enlaces e iconos. Elige un efecto, pruébalo en distintos…