CSS-Zone
Haz brillante que se desliza sobre una pista. Ejemplo practico para loaders e indicadores de estado con vista previa en vivo, estructura HTML y CSS listo para produccion que puedes integrar rapidamente.
Vista previa
HTML + CSS
<div class="beam-loader"><span class="beam-loader__track"></span></div> <style> .beam-loader { width:180px; height:12px; border-radius:999px; background: rgba(91,141,239,0.08); border:1px solid rgba(91,141,239,0.15); overflow:hidden; position:relative; box-shadow: inset 0 1px 0 rgba(91,141,239,0.15); } .beam-loader__track{ position:absolute; inset:0; width:60%; background: linear-gradient(90deg, transparent, rgba(91,141,239,.65), transparent); animation: beam-slide 1.1s ease-in-out infinite; } @keyframes beam-slide{0%{transform:translateX(-80%);}100%{transform:translateX(140%);}} </style>
Barrido de luz es un patron reutilizable de animacion CSS que puede integrarse en interfaces modernas sin dependencias externas. El ejemplo incluye estructura HTML y estilos de movimiento faciles de escalar para componentes de produccion.
Usa este efecto para indicar estado, reforzar el foco visual o anadir microinteracciones ligeras que apoyen la claridad del contenido. El movimiento debe reforzar la jerarquia, asi que manten velocidad, contraste y densidad alineados con los objetivos de tu interfaz.
Copia el snippet, adapta espaciado y tiempos a los tokens de tu sistema y prueba el comportamiento en moviles y dispositivos de bajo consumo. Anade soporte para reduced-motion para mantener el componente accesible sin perder su funcion.