Generador de Cargadores CSS - Spinner y Animaciones de Carga Online
Crea animaciones de carga CSS puras con vista previa en tiempo real y personalización
<style> .loader { width: 48px; height: 48px; border: calc(48px / 8) solid #93c5fd; border-top-color: #3b82f6; border-radius: 50%; animation: spinnerBorder-spin 1s linear infinite; } @keyframes spinnerBorder-spin { to { transform: rotate(360deg); } } </style> <div class="loader"></div>
Preguntas Frecuentes
Que es un Generador de Loaders CSS?
Un Generador de Loaders CSS es una herramienta en linea que ayuda a los desarrolladores a crear animaciones de carga en CSS puro (spinners, indicadores de progreso, puntos, barras, pulsos, etc.) sin escribir animaciones de keyframes CSS desde cero. Los indicadores de carga son componentes de interfaz esenciales que proporcionan retroalimentacion visual cuando el contenido se esta obteniendo, procesando o cargando. Esta herramienta proporciona una galeria de disenos de loaders preconstruidos que se pueden personalizar en color, tamano y velocidad de animacion, y luego exportar como codigo HTML y CSS limpio, listo para copiar y usar en produccion.
Como uso este Generador de Loaders CSS?
1. Explore la galeria de loaders y haga clic en un estilo que se adapte a su diseno (spinners, puntos, barras, pulso, anillos o estilos varios). 2. Use las pestanas de categoria para filtrar loaders por tipo. 3. Personalice el color primario usando el selector de color. 4. Ajuste el control deslizante de tamano (16-96px) y el control deslizante de velocidad (0.3-3.0s). 5. Alterne el fondo de vista previa entre claro y oscuro. 6. Elija su formato de salida (HTML, CSS o Combinado) y haga clic en Copiar.
Estan seguros mis datos? Se envia algo a un servidor?
Si, sus datos estan completamente seguros. Esta herramienta se ejecuta completamente en su navegador usando JavaScript y CSS del lado del cliente. Ninguna configuracion, valor de color o codigo de salida se envia a ningun servidor. Las animaciones del loader se renderizan directamente en su navegador usando CSS puro. La herramienta funciona sin conexion una vez cargada.
Por que usar loaders CSS puros en lugar de GIFs, SVGs o animaciones JavaScript?
Los loaders CSS puros ofrecen varias ventajas: (1) Rendimiento — Las animaciones CSS son aceleradas por hardware por la GPU, resultando en animaciones mas suaves a 60fps. (2) Escalabilidad — Los loaders CSS escalan perfectamente a cualquier tamano sin pixelacion. (3) Tamano de archivo — Los loaders CSS agregan virtualmente cero bytes comparados con archivos GIF (10-50KB cada uno). (4) Personalizacion — Los colores, tamanos y velocidades se pueden cambiar instantaneamente via propiedades CSS. (5) Sin dependencias — No se necesitan bibliotecas JavaScript ni archivos de imagen. (6) Accesibilidad — Las animaciones CSS responden a la media query prefers-reduced-motion.
Como funcionan tecnicamente las animaciones de carga CSS?
Las animaciones de carga CSS combinan varias caracteristicas de CSS: Las reglas @keyframes definen la secuencia de animacion (por ejemplo, rotacion, escalado, transiciones de opacidad). La propiedad abreviada animation aplica keyframes con duracion, funcion de temporizado y conteo de iteraciones. Los pseudo-elementos (::before, ::after) permiten animaciones de multiples partes desde un solo elemento HTML. Las propiedades CSS transform (rotate, scale, translate) manejan cambios visuales eficientemente via composicion GPU. animation-delay crea efectos escalonados entre multiples elementos.
Puedo personalizar el CSS del loader generado despues de copiarlo?
Si, el CSS generado es codigo estandar y bien formateado que puede modificar libremente. Si usa el modo de salida con Variables CSS, puede cambiar colores, tamanos y velocidades simplemente actualizando los valores de propiedades personalizadas de :root — esto es especialmente util para temas. Tambien puede renombrar la clase .loader, ajustar animation-timing-function o modificar los porcentajes de keyframes.
Como hago que los loaders CSS sean accesibles?
Para hacer los loaders CSS accesibles: (1) Agregue role="status" y aria-label="Loading" al elemento del loader. (2) Incluya texto visualmente oculto como <span class="sr-only">Loading...</span> dentro del loader. (3) Respete prefers-reduced-motion agregando @media (prefers-reduced-motion: reduce) { .loader { animation: none; } }. (4) Asegure suficiente contraste de color entre el loader y el fondo.
Ejemplos de Codigo
// CSS Loader Generator - JavaScript Implementation
const LOADERS = {
spinnerBorder: {
name: 'Border Spinner',
category: 'spinner',
html: '<div class="loader"></div>',
css: (color, size, speed) => `
.loader {
width: ${size}px;
height: ${size}px;
border: ${Math.round(size / 8)}px solid #f3f3f3;
border-top: ${Math.round(size / 8)}px solid ${color};
border-radius: 50%;
animation: loader-spin ${speed}s linear infinite;
}
@keyframes loader-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}`,
},
bouncingDots: {
name: 'Bouncing Dots',
category: 'dots',
html: '<div class="loader"><span></span><span></span><span></span></div>',
css: (color, size, speed) => `
.loader {
display: flex;
gap: ${Math.round(size / 6)}px;
align-items: center;
}
.loader span {
width: ${Math.round(size / 4)}px;
height: ${Math.round(size / 4)}px;
background-color: ${color};
border-radius: 50%;
animation: loader-bounce ${speed}s ease-in-out infinite;
}
.loader span:nth-child(2) {
animation-delay: ${(-speed / 3).toFixed(2)}s;
}
.loader span:nth-child(3) {
animation-delay: ${(-speed / 6).toFixed(2)}s;
}
@keyframes loader-bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}`,
},
};
function generateLoader(loaderId, options = {}) {
const { color = '#3b82f6', size = 48, speed = 1.0 } = options;
const loader = LOADERS[loaderId];
if (!loader) throw new Error(`Unknown loader: ${loaderId}`);
return {
html: loader.html,
css: loader.css(color, size, speed).trim(),
};
}
// Usage
const result = generateLoader('spinnerBorder', {
color: '#ef4444', size: 64, speed: 0.8
});
console.log('HTML:', result.html);
console.log('CSS:', result.css);