Generador de Loader CSS
Crea hermosos spinners y animaciones de carga CSS. 12 estilos, personaliza colores, tamaño y velocidad.
Estilo del loader
Personalizar
Vista previa en vivo
Código Generado
Herramientas populares
Acerca de Generador de Loader CSS
El Generador de loaders CSS te permite crear resultados de calidad al instante, gratis y directamente en tu navegador. Crea spinners y animaciones de carga en CSS. 12 estilos; personaliza colores, tamaño y velocidad. Copia el código CSS puro. Nuestro Generador de loaders CSS parte de valores predeterminados inteligentes, pero puedes ajustar cada opción para que el resultado final encaje con tu proyecto. Como todo se ejecuta en el navegador, lo que introduces y los resultados generados siguen siendo privados: no se sube ni se registra nada. Úsalo tantas veces como quieras, en proyectos personales o comerciales, sin necesidad de atribución.
Casos de uso
Cómo usar
Pulsa una de las doce miniaturas animadas de Estilo de loader: Spinner, Dots, Pulse, Ring, Bars, Bounce, Chase, Square, Dual Ring, Ripple, Ellipsis u Hourglass.
Define el Color con el selector o el campo hexadecimal, y elige un Color secundario para la pista sin rellenar de los loaders con forma de anillo.
Arrastra Tamaño de 16px a 120px, Velocidad de 0.3s a 3s y Grosor de 2px a 12px hasta que la animación te convenza.
Observa el spinner en marcha en el panel Vista previa en vivo para comprobar el tamaño y el ritmo a escala real.
Cambia la pestaña de salida a CSS, HTML o Completo, pulsa Copiar y pega en tu página el marcado fwt-loader junto con sus keyframes.
Consejos Pro
- Cambia los ajustes de uno en uno para ver cómo afecta cada opción al resultado del Generador de loaders CSS.
- Pulsa el botón de regenerar o aleatorizar varias veces: muchas veces el mejor resultado aparece al tercer o cuarto intento.
- Copia varios candidatos al portapapeles o a un archivo de notas y compáralos antes de quedarte con uno.
- Si el Generador de loaders CSS permite exportar, guarda enseguida los resultados importantes: no se conserva nada en el servidor.
- Combina los resultados de este Generador de loaders CSS con otras herramientas (formateadores, vistas previas, validadores) para pulir el resultado final.
Preguntas frecuentes
Sí. Todo lo que generes con el Generador de loaders CSS es tuyo y puedes usarlo libremente en proyectos personales o comerciales, sin necesidad de atribución.
Sí, es totalmente gratis: sin registro, sin muros de pago y sin marcas de agua en el resultado.
En ningún sitio de nuestro lado. El Generador de loaders CSS funciona en tu navegador y no se conserva nada al cerrar la pestaña, así que guarda en tu equipo los resultados que te importen.
Sí. El Generador de loaders CSS incluye opciones configurables para adaptar el estilo, la longitud o el formato a lo que necesites.
El Generador de loaders CSS utiliza una aleatoriedad robusta y plantillas variadas, por lo que es muy probable que cada resultado sea único. Si necesitas unicidad garantizada en un conjunto grande, revisa la colección final con tu propio proceso de deduplicación.
Sí. La interfaz es responsive y funciona en iOS, Android y todos los navegadores móviles modernos.