Generador de CSS Loader / Spinner
Elige una animación de carga, personaliza colores y velocidad, y copia el código CSS puro.
Elegir un estilo
Vista previa
Código CSS + HTML
Cómo usar
- Elige un estilo de loader en la galería de arriba.
- Personaliza color, tamaño, velocidad y grosor.
- Copia el CSS + HTML generado y pégalo en tu proyecto.
Preguntas frecuentes
¿Estos loaders usan JavaScript?
¡No! Todas las animaciones son CSS puro con @keyframes. Funcionan sin ningún JavaScript.
¿Estos loaders son accesibles?
Sí, si añades role="status" y un aria-label al elemento loader. A los usuarios que prefieren menos animaciones puedes tenerlos en cuenta con una media query prefers-reduced-motion.
Cómo usar
- Elige un estilo de loader: selecciona entre spinners, puntos, barras, anillos, pulsaciones o esqueletos.
- Personaliza la apariencia: ajusta color, tamaño, velocidad de animación y grosor con los deslizadores.
- Previsualiza la animación: el loader se anima en directo en la zona de vista previa, para que veas exactamente el resultado.
- Copia el HTML y el CSS: obtén el marcado HTML mínimo y el CSS requerido, sin dependencia de JavaScript.
¿Por qué usar el generador de loaders CSS?
Los indicadores de carga son elementos UX esenciales que señalan una actividad en curso y evitan que los usuarios crean que la página está congelada durante operaciones asíncronas. Los loaders en CSS puro (únicamente a base de animaciones CSS, sin JavaScript ni imágenes) son ligeros, fiables y se renderizan a 60 f/s gracias a las transformaciones aceleradas por GPU. Este generador produce código de spinner listo para producción que puedes integrar directamente en tu proyecto. Todas las animaciones usan @keyframes con transform y opacity, las dos propiedades CSS que se animan sin provocar reflow, garantizando un renderizado fluido a 60 f/s incluso en dispositivos modestos.
Tipos de loaders disponibles
- Spinner, círculo en rotación, el loader más universal
- Puntos, tres puntos que rebotan en secuencia
- Barra / Progreso, animación horizontal tipo barra de progreso
- Anillo, spinner en anillo con efecto luminoso
- Pulsación, efecto de pulsación por escala/opacidad
- Esqueleto, parpadeo de placeholder para la carga de página
Una breve historia de la animación CSS que impulsa tu spinner
La regla @keyframes y el atajo animation que este generador emite están definidos en el Módulo CSS Animations Nivel 1. El primer Working Draft del W3C se publicó el 20 de marzo de 2009 y la spec finalmente alcanzó la Recomendación W3C el 11 de diciembre de 2018, nueve años después. Para entonces, todos los navegadores en uso soportaban la sintaxis desde hacía años: Safari 4 (junio de 2009) con el prefijo -webkit-, Firefox 5 (junio de 2011), Internet Explorer 10 (octubre de 2012), y sin prefijo por Chrome 43 en abril de 2015. El Módulo CSS Animations Nivel 2 es el Working Draft actual y añade animaciones impulsadas por scroll a través de animation-timeline (enviado en Chrome 115, julio de 2023; Safari y Firefox siguieron a finales de 2024). La rotación en el preset «spinner» viene del Módulo CSS Transforms Nivel 1, una spec separada en Candidate Recommendation desde febrero de 2019 pero universalmente enviada: transform: rotate(360deg) al 100% dentro de un bloque @keyframes es lo que hace girar el anillo.
La accesibilidad no es opcional: la preferencia «Reducir movimiento»
Cada sistema operativo lanzado desde 2014 incluye un ajuste de accesibilidad «Reducir movimiento», macOS «Reducir movimiento» (en Accesibilidad → Pantalla), iOS «Reducir movimiento», Windows «Mostrar animaciones», Android «Eliminar animaciones», GNOME «Activar animaciones» desactivado. La media query prefers-reduced-motion (definida en Media Queries Nivel 5, primer Working Draft público del W3C noviembre de 2017) permite a tu CSS detectar esta preferencia y detener el spinner. Siempre envuelve cualquier spinner en:
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; }
}El Criterio de Éxito WCAG 2.1 2.3.3 «Animación de Interacciones» (Nivel AAA, Recomendación W3C 5 de junio de 2018) requiere que cualquier animación de movimiento desencadenada por interacción pueda deshabilitarse a menos que el movimiento sea esencial. Un spinner rara vez es esencial. WCAG 2.2 (octubre de 2023) hereda la misma regla.
Para lectores de pantalla, envuelve el spinner en <div role="status" aria-live="polite"> con un texto «Cargando…» oculto visualmente. Cuando la carga se complete, reemplaza el contenido; la región live anuncia «Cargado» a la tecnología de asistencia sin gritar. Establece aria-busy="true" en la región contenedora mientras carga y aria-busy="false" después. Este patrón está documentado en el capítulo de regiones live de la Guía de Prácticas de Autoría ARIA del W3C.
Por qué los spinners CSS permanecen suaves a 60 fps
Los pipelines de renderizado de los navegadores modernos tienen tres etapas: layout (cálculo de posiciones), paint (rellenando píxeles) y composite (combinando capas en la GPU). Las propiedades transform y opacity son las únicas dos que saltan el layout y el paint y se ejecutan puramente en el hilo del compositor. Animarlas es esencialmente gratis a cualquier framerate. Animar width, height, top, left, margin, o cualquier cosa que cambie el box model fuerza un pase completo de layout-y-paint en cada frame y cae rápidamente por debajo de 60 fps en dispositivos de gama baja. Cada preset en este generador anima solo transform y opacity por esta razón. Si necesitas una pista para el navegador, will-change: transform (definido en Módulo CSS Will Change Nivel 1, Candidate Recommendation W3C 26 de abril de 2022) promueve el elemento a su propia capa de compositor; úsalo con moderación porque cada capa cuesta memoria de GPU.
Cuándo un spinner es la respuesta correcta y cuándo no
En Response Times: The 3 Important Limits (1993, reformulado en 2014), Jakob Nielsen del Nielsen Norman Group definió tres umbrales de percepción: 0,1 segundo es «instantáneo», 1 segundo es el límite para el flujo de pensamiento ininterrumpido, 10 segundos es el límite para mantener la atención del usuario. Mapea tu estrategia de loader a estos:
- Menos de 1 segundo: ningún indicador. Un spinner que parpadea durante 300 ms es peor que ningún spinner: el ojo registra el parpadeo como un fallo.
- 1 a 5 segundos: un spinner indeterminado o una barra estilo barber-pole. Le dice al usuario «algo está pasando» sin comprometerse a una duración.
- 5 a 10 segundos: una
<progress max="100" value="42">determinada con un porcentaje. Los usuarios toleran mejor una larga espera cuando pueden ver el progreso. - Navegación de rutas SPA: una pantalla esqueleto (cajas grises de marcador imitando el diseño final) se siente más rápida que un spinner. Luke Wroblewski acuñó el término en su publicación de marzo de 2013 Mobile First Patterns; el «shimmer» de Facebook (2014) y Material 2 de Google (mayo de 2018) lo hicieron común.
Funciones de easing y cómo se siente cada una
La propiedad animation-timing-function (y el Módulo CSS Easing Functions Nivel 1, Candidate Recommendation 6 de diciembre de 2022) elige cómo progresa el valor entre keyframes:
linear, tasa constante. Correcto para un spinner continuo; incorrecto para cualquier cosa que desacelere hacia un estado final.ease,ease-in,ease-out,ease-in-out, alias de palabra clave para curvas cubic bezier comunes. El predeterminado del navegador esease.cubic-bezier(x1, y1, x2, y2), curva personalizada con cuatro flotantes en[0, 1].cubic-bezier(.25, .1, .25, 1)es la curva «ease» estándar. Pruebacubic-bezier(.68, -.55, .27, 1.55)para un efecto de rebote «overshoot».steps(n, jump-end), saltos discretos, ideal para un loader de puntos que cambia de estado sin interpolar.
Errores comunes
- Enviar un spinner sin
prefers-reduced-motion. Los usuarios con trastornos vestibulares, desencadenantes de migraña o sensibilidades de atención son golpeados por cada anillo giratorio en la web. La solución son dos líneas de CSS. - Olvidar
role="status"y el texto oculto visualmente. Un spinner que solo gira visualmente no le dice nada a un usuario de lector de pantalla. - Velocidad de animación bajo 0,5 segundos por ciclo. Un spinner que completa en 0,3 s se siente frenético y se lee como «error» para muchos usuarios. 1 a 1,5 s por ciclo es el rango cómodo.
- Animar propiedades de layout. Animar
width,marginotopcausa thrash de layout. Quédate contransformyopacity. - Mostrar un spinner para cada operación. Si los datos llegan en 100 ms, el spinner parpadea y se lee como un fallo. Retrasa el spinner 200 a 300 ms con un
setTimeoutque limpias en caso de éxito. - Olvidar centrar el spinner. Un `.spinner` flotando en la parte superior izquierda de una sección porque su contenedor no es un contenedor flex/grid es el segundo bug visual más común.
Más preguntas frecuentes
¿Funcionarán estos spinners en navegadores antiguos?
Todos los navegadores modernos (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+) soportan @keyframes y transform sin ningún prefijo. Internet Explorer 10 y 11 requieren el prefijo -ms- en algunos lugares pero por lo demás funcionan. IE 9 y anteriores no tienen soporte de animación CSS: fall back a un GIF animado, o usa @supports (animation: spin 1s) para detección de característica.
¿Cómo detengo el spinner cuando el contenido carga?
Ya sea elimina el elemento del DOM, ocúltalo con display: none o el atributo hidden, o pausa la animación con animation-play-state: paused. Pausar es lo más barato si podrías mostrarlo de nuevo. Si usaste el patrón ARIA, también establece aria-busy="false" en el contenedor y reemplaza el texto de carga con el anuncio del estado cargado.
¿Puedo personalizar los colores del spinner más allá de lo que el selector permite?
Sí. El CSS de salida usa valores hex / rgb / hsl regulares; reemplázalos con variables CSS (var(--brand-primary)) para que el spinner siga tu design system. Para un spinner bicolor, edita el atajo border-color: border-color: var(--brand) transparent transparent transparent da el look clásico «arco de un cuarto».
¿Por qué no usar simplemente una animación SVG o Lottie?
Los spinners CSS pesan menos de 200 bytes, no necesitan request extra, no necesitan runtime JavaScript, y se renderizan antes de cualquier carga de recurso externo. SVG es bueno para formas complejas; Lottie es bueno para animaciones creadas por diseñadores desde After Effects. Para un indicador genérico «algo está cargando», CSS es la herramienta más barata que hace correctamente el trabajo.
¿Se rastrea o se envía algo a un servidor?
No. El generador se ejecuta enteramente en el JavaScript de tu navegador. Tus elecciones de color, ajustes de tamaño y CSS copiado nunca salen de la página. Verifica en la pestaña Red de DevTools.