Generador de animación de carga CSS (spinner)

Cómo funciona

Escriba en el panel izquierdo el color de la animación; se reconocen escrituras HEX como #2F6FED, rgb(47, 111, 237) y hsl(220, 84%, 56%), y el color elegido aparece como muestra debajo del resultado. Elija uno de los cuatro patrones en Tipo de animación e indique el tamaño en píxeles; un anillo de 48 píxeles recibe un borde de 6 píxeles y da una vuelta cada 0,8 segundos. Las primeras líneas del código contienen el único div que va en su página: gracias a role="status" y aria-label, los lectores de pantalla lo anuncian como «Cargando». Pegue el CSS que sigue en su hoja de estilos; la clase y la regla @keyframes se refieren una a otra, cópielas juntas. El código termina con un bloque @media que baja la animación a un tercio de su velocidad para quienes activaron la opción de reducir movimiento. La herramienta escribe el código pero no lo reproduce; para ver la animación, abra el código en su propia página o en un editor de código en línea.

Esta herramienta también se busca como generador loader css, spinner css, css loader, loader css tres puntos.

¿Qué es @keyframes?

@keyframes es la regla CSS que define las etapas de una animación a lo largo del tiempo. Dentro se ponen puntos en porcentaje, o con from y to, y en cada uno se indica cómo se ve el elemento: sin girar en 0 %, girado 360 grados en 100 %. El navegador calcula por su cuenta los cuadros intermedios. La animación empieza cuando el elemento recibe la propiedad animation con el nombre de la regla, una duración y un número de repeticiones; en esta herramienta la repetición es infinita.

¿Qué es prefers-reduced-motion?

prefers-reduced-motion es la consulta de medios CSS que le dice a una página si el usuario activó en su sistema la opción de reducir movimiento. Desactivar las animaciones en Windows, «Reducir movimiento» en macOS e iOS y «Quitar animaciones» en Android la ponen en reduce. La página debe entonces suavizar o quitar los movimientos grandes y rápidos; las pautas de accesibilidad WCAG lo recomiendan.

¿Qué diferencia hay entre un loader CSS y un GIF de carga?

Un GIF de carga es un archivo de imagen fijo: hay que descargarlo, su color y su tamaño no cambian, se ve borroso al ampliarlo y sus bordes transparentes se ven dentados sobre fondos oscuros. Un loader CSS son unas pocas líneas de código: no se descarga nada más, el color y el tamaño cambian con un número, se ve nítido en cualquier densidad de pantalla y puede respetar la opción de reducir movimiento. La única ventaja del GIF es que funciona donde CSS no llega, por ejemplo en el cuerpo de un correo.

¿Por qué un solo div y por qué el bloque de movimiento reducido?

El indicador de carga es la parte de la página que más veces se agrega y se quita. Una estructura con cinco span anidados ensucia el HTML y aumenta los errores cuando JavaScript la muestra y la oculta. Los cuatro patrones de aquí funcionan con un solo div: el anillo se dibuja con un borde, los tres puntos con sombras (box-shadow), las barras con tres franjas de fondo y el pulso con un cambio de escala. No se carga ninguna imagen, fuente ni biblioteca.

A algunas personas el giro o el rebote continuo les produce mareo o náuseas. Por eso activan la opción de reducir movimiento en su sistema, y el navegador se lo comunica a la página con prefers-reduced-motion. El bloque del final del código no detiene la animación: la hace tres veces más lenta. Se sigue viendo que algo carga, pero sin el movimiento rápido.

¿Qué patrón conviene en cada caso?

El anillo que gira es el indicador más conocido. Funciona dentro de un botón, al enviar un formulario o mientras carga una sección, y se distingue bien en tamaños pequeños, de 16 a 24 píxeles. Los tres puntos que rebotan significan «la otra persona está escribiendo» en chats y mensajería; van cerca de una línea de texto y sirven para esperas cortas.

Las barras evocan procesos continuos como audio, música o transmisión de datos. El pulso es un patrón tranquilo, adecuado para un marcador de ubicación en un mapa o un indicador de transmisión en vivo, donde quiere decir «aquí está pasando algo». Si la espera va a durar más de unos segundos, ningún spinner basta: use una barra de progreso o una vista esqueleto.

Preguntas frecuentes

¿Cómo se hace una animación de carga con CSS?

Coloque un div en la página, dele tamaño y color con CSS, describa el movimiento con una regla @keyframes y únala al div con la propiedad animation en bucle infinito. Esta herramienta escribe todo ese código para cuatro patrones listos; usted solo elige color y tamaño, y copia.

¿Cómo oculto el indicador cuando termina la carga?

Quite el div de la página o agréguele el atributo hidden cuando termine el trabajo. Una animación invisible que sigue en la página ocupa el procesador sin necesidad; un elemento con display: none no se anima.

¿Cómo cambio la velocidad de la animación?

En la línea animation del código aparece la duración en segundos (por ejemplo 0.8s). Un número menor la acelera y uno mayor la hace más lenta. Cambie en la misma proporción la duración del bloque de movimiento reducido.

¿Qué anuncia un lector de pantalla con este indicador?

Gracias a role="status" y aria-label="Cargando" en el div, el lector de pantalla lo trata como un mensaje de estado y lee la etiqueta. La animación en sí es visual y no se anuncia; adapte la etiqueta al idioma de su sitio.