CSS-Zone
Dos circulos discontinuos que giran en direcciones opuestas. 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="ring-dash"></div> <style> .ring-dash { width:96px; height:96px; border-radius:50%; border:6px dashed #5b8def; box-shadow: 0 0 20px rgba(91, 141, 239, 0.25); animation: ring-dash-rotate 1.6s linear infinite; position:relative; } .ring-dash::after{ content:''; position:absolute; inset:16px; border-radius:50%; border:4px solid rgba(154,107,255,.65); border-right-color:transparent; animation: ring-dash-reverse 1.1s linear infinite; } @keyframes ring-dash-rotate{to{transform:rotate(360deg);}} @keyframes ring-dash-reverse{to{transform:rotate(-360deg);}} </style>
Anillo discontinuo 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.