Generador de Spinner CSS para loaders y animaciones de carga
El generador de spinner CSS convierte 43 plantillas hechas a mano en animaciones de carga listas para copiar, así nunca tienes que escribir keyframes desde cero. Explora la galería, ajusta el color, el tamaño y la velocidad, y copia HTML y CSS limpios para tu proyecto.
Está pensado para desarrolladores front-end y diseñadores que necesitan un indicador de carga rápido y sin dependencias: un spinner, puntos, barras, un pulso, una barra de progreso o una forma animada. Cada plantilla es de CSS puro, por lo que no hay JavaScript, ni archivos de imagen, ni librerías que instalar.
Cómo generar un loader CSS
Explora y elige un loader
Usa las pestañas de categoría — Todos, Spinner, Dots, Bars, Pulse, Progress y Formas — para filtrar la galería. Cada miniatura se anima en vivo, así que haz clic en la que te guste o pulsa Aleatorio para saltar a una nueva.
Personaliza color, tamaño y velocidad
Abre el selector de color para fijar cualquier color del loader, arrastra el control de Tamaño entre 20px y 120px, y ajusta la Velocidad (duración de la animación) de 0.3s a 3.0s. La vista previa en vivo se actualiza al instante con cada cambio.
Compruébalo sobre cualquier fondo
Alterna la vista previa entre los fondos Claro, Oscuro y Transparente. La vista transparente a cuadros te ayuda a confirmar que el loader se ve limpio sobre tu página, sin fondos que sobren.
Copia el HTML y el CSS
Cambia entre las pestañas HTML y CSS y haz clic en Copiar. El CSS ya trae integrados tu color exacto, el tamaño en píxeles y los tiempos, así que pega el marcado en tu página y los estilos en tu hoja de estilos — listo.
Funciones
43 plantillas de loaders cuidadas
Una colección hecha a mano que abarca desde anillos giratorios simples hasta cubos 3D animados, cada uno listo para usar en producción.
Seis categorías de loaders
Filtra por Spinner, Dots, Bars, Pulse, Progress o Formas, o míralos todos en una galería para encontrar el estilo adecuado rápido.
Galería con animación en vivo
Cada miniatura de la cuadrícula ejecuta su animación real, así puedes previsualizar cada loader en movimiento antes de elegirlo.
Selector de color
Combina con tu marca fijando cualquier color para el loader, aplicado a la vez en cada parte de la animación.
Control de tamaño y velocidad
Escala el loader de 20px a 120px y ajusta la duración de la animación, desde unos rápidos 0.3s hasta unos lentos 3.0s.
Vista previa claro, oscuro y transparente
Cambia el fondo de la vista previa para comprobar que tu loader se mantiene visible y limpio en cualquier contexto de página.
Pestañas separadas de HTML y CSS
El código se divide en marcado mínimo y estilos, para que puedas pegar cada parte justo donde corresponde.
Salida lista para producción
El CSS generado usa valores resueltos — píxeles, colores y tiempos exactos — en lugar de variables, listo para pegar sin configuración extra.
Copia con un clic
Copia la pestaña activa de HTML o CSS directo a tu portapapeles con un solo botón y una confirmación clara.
Selector aleatorio de loader
Pulsa Aleatorio para caer al instante en otro loader dentro de la categoría que estás explorando, para inspirarte rápido.
CSS puro, sin JavaScript
Cada loader funciona solo con keyframes de CSS — sin scripts ni imágenes — por lo que se mantiene ligero y rápido.
Diseño adaptable
La galería, la vista previa y los paneles de código se adaptan a tu pantalla, así funciona igual en escritorio y en móvil.
Preguntas frecuentes
¿Cómo creo un spinner de carga con CSS?
Elige una plantilla de la galería, ajusta su color, tamaño y velocidad a tu gusto, y copia las pestañas de HTML y CSS en tu proyecto. La animación del spinner empieza a funcionar en cuanto pegas el marcado en tu página y los estilos en tu hoja de estilos.
¿Puedo hacer un spinner solo con CSS, sin JavaScript?
Sí. Cada loader aquí está construido por completo con animaciones @keyframes de CSS. Solo necesitas el marcado HTML y los estilos CSS — no hace falta JavaScript ni archivos de imagen para que la animación funcione.
¿Cómo cambio el color y la velocidad del spinner?
Usa los controles del generador: el selector de color fija el color del loader, y el control de Velocidad fija la duración de la animación de 0.3s a 3.0s. Después de copiar, todavía puedes editar los valores en el CSS — busca el color (por ejemplo #6366f1) o la duración en segundos y cámbialo directamente.
¿Cómo centro un spinner en la página?
Envuelve el loader en un contenedor de alto completo y usa flexbox, por ejemplo display: flex; align-items: center; justify-content: center; con un min-height igual al área que quieres llenar. Para una superposición a pantalla completa, posiciona ese contenedor con position: fixed; inset: 0; para que el spinner quede en el centro de la ventana.
¿Cuál es la diferencia entre un loader y un spinner?
"Loader" es el término general para cualquier indicador de carga, mientras que un "spinner" es un tipo común — un anillo o arco que gira. Esta herramienta cubre ambos: la categoría Spinner reúne los clásicos loaders giratorios, y las categorías Dots, Bars, Pulse, Progress y Formas te dan otros estilos de carga para la misma tarea.
¿Puedo cambiar el color del loader después de copiar el código?
Sí. El CSS generado usa un valor de color explícito, así que puedes buscarlo y reemplazarlo en el CSS cuando quieras. Para un theming más fácil, cambia ese color por una propiedad personalizada de CSS como var(--loader-color) y contrólalo desde un solo lugar.
¿Qué navegadores admiten estos loaders?
Todos los loaders funcionan en navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Se apoyan en funciones de CSS ampliamente compatibles como @keyframes, border-radius y transform.
¿Los loaders son libres de usar en proyectos comerciales?
Sí. El CSS que copias es tuyo para usarlo en cualquier proyecto, incluido el trabajo comercial, sin necesidad de atribución.
Aún no hay comentarios. ¡Sé el primero en comentar!