Laboratorio de componente
Loaders
Página de laboratorio para construir loaders, skeletons y placeholders reutilizables. Primero se define la estructura Astro/HTML; después se agregan estilos visuales, animaciones, efectos, estados de interacción y código generado.
Preview
Preview base de loader
Área reservada para la vista previa base de loader. En el siguiente ticket se colocará un ejemplo de carga inicial, skeleton o placeholder antes de aplicar variantes.
Estilos visuales
Opciones de estilo
Opciones previstas: loader simple, skeleton de tarjeta, skeleton de texto, placeholder de imagen, loader premium y pantalla de carga inicial.
Animaciones
Opciones de movimiento
Opciones previstas: shimmer, pulse, rotación, aparición suave, desplazamiento de brillo y transición de carga a contenido.
Efectos
Opciones de FX
Opciones previstas: glow suave, glass blur, reflejo de carga, gradiente móvil, profundidad y fondo radial.
Estados
Estados de interacción
Estados previstos: loading, loaded, error, empty, reduced-motion, compact y full-screen.
Código generado
Combinación actual
LOAD-001 + STYLE-001 + ANIM-001 + FX-001 + STATE-001El código generado se conectará cuando existan variantes seleccionables para loaders, skeletons y placeholders.