Softonic

Generador de animación de spinner CSS

Paso 1 / 2
Siguiente

Una animación de spinner CSS es un anillo que gira sin parar mediante una regla de keyframes. Aquí defines la velocidad de giro, previsualizas el movimiento y copias tanto la clase como el bloque @keyframes.

Cómo ajustar la animación

  1. 1

    Introduce la velocidad

    En el campo Velocidad (s), escribe los segundos que debe durar una vuelta completa, por ejemplo 0,8 o 1,2.

  2. 2

    Observa la previsualización

    El anillo gira a esa velocidad al instante, así que puedes juzgar si transmite calma o urgencia.

  3. 3

    Ajusta tamaño y color

    Cambia el tamaño, el grosor y el color para que la animación encaje con el lugar donde se va a usar.

  4. 4

    Copia el CSS

    Copia las reglas generadas. La línea de animación y los keyframes van juntos.

Cómo se construye la animación

El CSS generado tiene dos partes que funcionan en pareja. La propiedad animation de .loader indica el nombre de la animación, fija su duración, elige la función de temporización y la repite:

animation: spin 0.8s linear infinite;

La regla @keyframes spin describe el movimiento en sí. Solo tiene un estado final, que es una rotación de 360 grados. El navegador parte de la posición normal del elemento e interpola hasta ese estado final:

@keyframes spin {
  to { transform: rotate(360deg); }
}

El campo Velocidad de la herramienta se convierte en la duración. Todo lo demás, incluidos linear e infinite, se mantiene igual.

Cómo elegir la duración

Segundos por vuelta Cómo se percibe
De 0,4 a 0,6 Rápida y agitada, puede parecer nerviosa
De 0,8 a 1 Constante, la opción habitual
De 1,2 a 1,6 Tranquila, encaja con spinners grandes
2 o más Lenta, puede parecer bloqueada

Los anillos grandes pueden girar un poco más despacio que los pequeños, porque el borde de un círculo grande ya recorre más distancia en cada segundo.

Por qué una temporización lineal

La herramienta usa linear para que el anillo mantenga la misma velocidad angular en toda la vuelta. Las curvas de aceleración como ease-in-out hacen que el anillo frene y acelere en cada vuelta, lo que parece un tirón en un bucle infinito. Si aun así quieres ese efecto, cambia la palabra linear en el CSS pegado.

Límites que conviene tener en cuenta

  • Una velocidad de 0 da una animación de duración cero, así que el anillo no girará de forma visible. Usa un valor mayor que 0.
  • El spinner siempre gira en sentido horario. Para invertirlo, cambia la rotación final a -360deg después de copiar.
  • El movimiento es una única rotación continua. Las pulsaciones, los rebotes o los movimientos en varios pasos requieren keyframes adicionales escritos a mano.

Pausar y controlar la animación

Una vez que el CSS está en tu página, puedes controlar la animación con propiedades estándar. Si estableces animation-play-state: paused;, el anillo se queda congelado en su sitio, lo cual resulta útil en un estado en el que el trabajo ya terminó pero el elemento sigue visible. Si estableces animation-delay: 0.2s;, el inicio se retrasa, así que el spinner solo aparece si la espera no es instantánea. Son propiedades CSS normales que añades a la regla .loader después de copiarla.

Preguntas frecuentes

Reduce el número del campo Velocidad (s). Un valor de 0,6 significa que una vuelta completa dura seis décimas de segundo, así que gira más rápido que con 1.

Repite la animación sin fin. Si lo sustituyes por un número como 3, el anillo se detiene después de tres vueltas.

Sí. Cambia el nombre en los dos lugares: después de animation: en la clase y después de @keyframes. Deben coincidir exactamente.

El navegador puede animar transform sin recalcular el diseño de la página, así que es una forma ligera de mover un elemento y normalmente resulta fluida, incluso en dispositivos modestos.

Herramientas relacionadas

Generador de Configuración de Webpack

Crea un webpack.config.js para webpack 5 con JavaScript puro, React o Vue: TypeScript, Babel, CSS o Sass, imágenes, HtmlWebpackPlugin, servidor de desarrollo y la línea de npm install.

Convertidor de ASCII a Binario

Convierte cualquier cadena ASCII a su representación binaria. Cada carácter se convierte en ocho bits, separados por espacios, listos para pegar en un seguimiento de protocolo o tarea.

Explorador de Rueda de Color

Explora la rueda de color de forma interactiva. Rota armonías, compara HSL vs RYB, identifica pares complementarios y triádicos en tiempo real.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Convertidor de HTML a imagen

Renderiza un fragmento de HTML y CSS como PNG o JPG de tamaño fijo en tu navegador. Elige lienzo y escala, previsualiza y descarga.

Generador de Colores Análogos

Genera una paleta análoga de cinco colores a partir de cualquier color base, con un trío clásico, dos tonos exteriores y valores hex, RGB y HSL.

Herramienta disponible en otros idiomas

Guías y casos de uso