Generador de Loaders CSS
Generador de loaders CSS gratis: diez spinners de carga en CSS puro con control en vivo de tamaño, velocidad, grosor y color, y copia de HTML y CSS listos para pegar.
¿Qué crea el generador de loaders CSS?
Construye indicadores de carga animados en CSS puro: anillo, puntos, barras, ondas, pulso, órbita, giro, onda, rebote y anillo degradado. Cada uno se genera con tu tamaño, velocidad, grosor y color elegidos, listo para copiar como HTML más CSS.
¿Los loaders necesitan JavaScript o imágenes?
No. Cada loader son elementos HTML simples animados con keyframes de CSS. No hay imágenes, ni icon fonts, ni librerías, ni scripts en ejecución: el bloque CSS por sí solo es suficiente.
¿Cómo añado un loader a mi web?
Haz clic en un loader de la cuadrícula, copia el bloque HTML donde deba aparecer y pega el bloque CSS en tu hoja de estilos. El CSS es autocontenido e incluye las reglas @keyframes necesarias.
¿Qué cambian los cuatro parámetros?
Tamaño controla el ancho y alto de todos los loaders, Velocidad cambia la duración de la animación, Grosor afecta a bordes y anchos de barras, y Color repinta al instante todos los elementos de la cuadrícula y del código.
¿Por qué mi loader copiado no se anima?
La causa más común es copiar solo las reglas de clase sin el bloque @keyframes, o renombrar la clase en HTML pero no en CSS. Copia ambos bloques tal como se generan y mantén los nombres de clase.
¿Las animaciones rinden bien?
Sí. Todos los loaders animan solo transform y opacity, propiedades que el navegador compone en GPU sin provocar layout ni repintado, así que siguen fluidos aunque haya varios loaders en la página.
¿Son accesibles los loaders?
Los spinners son decoración visual, así que los lectores de pantalla agradecen una pista de texto. Añade una etiqueta oculta como «Cargando» junto al loader, o usa aria-hidden="true" en el loader y anuncia el progreso aparte.
¿Se sube algo a un servidor?
No. El generador funciona por completo en tu navegador. Tus ajustes nunca salen de la página y el código generado se ensambla localmente en tu dispositivo.
Cómo usar Generador de Loaders CSS
El generador de cargadores CSS construye indicadores de carga animados en CSS puro: sin imágenes, sin JavaScript, sin dependencias. Elige uno de los diez estilos, ajusta tamaño, velocidad, grosor y color, y copia el HTML y el CSS generados directamente en tu proyecto.
- Ajusta los parámetros globales con los cuatro controles: Tamaño fija la caja de cada cargador, Velocidad cambia la duración de la animación, Grosor controla los bordes y anchos de barra, y Color pinta cada elemento.
- Explora la cuadrícula: los diez cargadores siguen animados en vivo con tu configuración actual, así que los comparas de un vistazo. Haz clic en cualquier cargador para seleccionarlo.
- El panel de detalle muestra el cargador seleccionado más grande, junto con su fragmento HTML y el CSS correspondiente (incluidos los @keyframes que necesita).
- Pulsa Copiar HTML o Copiar CSS para enviar cada bloque al portapapeles. El CSS es autosuficiente: pégalo en tu hoja de estilos y coloca el HTML donde deba aparecer el cargador.
- Cambia cualquier parámetro y la cuadrícula, la vista previa de detalle y ambos bloques de código se actualizan al instante.
Al ser CSS puro, los cargadores cuestan casi nada de ancho de banda y se ven nítidos en cualquier pantalla. Acompaña la animación con una etiqueta de texto por accesibilidad y evita duraciones por debajo de unos 0,5 s: los indicadores que parpadean demasiado rápido inquietan más de lo que tranquilizan.
Herramientas relacionadas
- Minificador CSS Minificador CSS online gratuito. Comprime y optimiza código CSS al instante eliminando espacios, comentarios y caracteres innecesarios. Reduce el tamaño para mejor rendimiento web.
- Embellecedor CSS Formatea y embellece código CSS al instante. Convierte CSS minificado en código legible y bien indentado con opciones personalizables.
- Generador de Border Radius Creativo Generador de border radius creativo gratuito en línea. Arrastra 8 puntos o elige una forma blob para crear figuras CSS orgánicas y copiar el código al instante.
- Convertidor de Color Convertidor de color online gratuito. Convierte formatos HEX, RGB, HSL, HSV al instante con selector visual. 100% privado, funciona en tu navegador.
- Generador de Easing CSS Generador online gratuito de easing CSS. Arrastra los puntos de control de cubic-bezier en una curva interactiva, elige entre 18 presets, mira una animación de bola en bucle y copia la función de temporización al instante.
- Generador de Text Shadow CSS Generador online gratuito de text-shadow CSS. Apila varias capas de sombra con desplazamiento, desenfoque, color y opacidad, prueba presets como Neón, 3D o Retro y copia el CSS al instante.
- Generador de Clip Path CSS Generador online gratuito de clip-path CSS. Diseña formas polygon, circle, ellipse e inset con puntos arrastrables, vista previa en vivo y copia del código CSS en un clic.
- Generador de Border Radius CSS Generador visual de border-radius CSS. Ajusta cada esquina de forma independiente con vista previa en tiempo real y copia el código CSS al instante.