Generador de spinner y cargador CSS animado

Genera un spinner / cargador CSS animado (tamaño, color, velocidad) con vista previa.

▸Size : 40px▸Thickness : 4px▸Speed : 0.8s

▸CSS

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #39d353;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

🔒 100 % en el cliente — no se envía ningún dato

Genera un spinner o cargador CSS animado y personaliza el tamaño, el color, el grosor y la velocidad, luego copia el código listo para usar. Un indicador de carga ligero sin imágenes ni bibliotecas JavaScript. Todo se crea localmente en tu navegador.

What is it for?

▸ Añadir un indicador de carga a una página o un botón
▸ Personalizar el color, el tamaño y la velocidad de la animación
▸ Obtener un cargador ligero sin imagen ni JavaScript
▸ Copiar CSS puro reutilizable en cualquier proyecto

FAQ

¿El spinner requiere JavaScript?

No, se basa únicamente en CSS y en la animación @keyframes, lo que lo mantiene muy ligero.

¿Puedo cambiar la velocidad de rotación?

Sí, basta con ajustar la duración de la animación para acelerar o ralentizar el spinner.

¿El código funciona en móvil?

Sí, las animaciones CSS son fluidas y están bien soportadas en los navegadores móviles modernos.