CSS-Zone
Anillo radiante alrededor de un orbe luminoso. 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="wave-orb"> <span class="wave-orb__ring"></span> <span class="wave-orb__core"></span> </div> <style> .wave-orb{position:relative;width:110px;height:110px;display:grid;place-items:center;} .wave-orb__ring{ position:absolute;width:100%;height:100%;border-radius:50%; border:2px solid rgba(91,141,239,0.25);animation:wave-orb 2.4s ease-out infinite; } .wave-orb__core{ width:32px;height:32px;border-radius:50%; background:radial-gradient(circle at 30% 30%,#5b8def,#9a6bff); box-shadow:0 0 20px rgba(91,141,239,.25),0 0 0 6px rgba(91,141,239,.12); animation:wave-core 1.6s ease-in-out infinite; } @keyframes wave-orb{0%{transform:scale(.65);opacity:.7;}70%{transform:scale(1.2);opacity:0;}100%{opacity:0;}} @keyframes wave-core{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}} </style>
Orbe ondulante 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.