CSS-Zone
Tres anillos superpuestos que giran a velocidades distintas. 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="triple-spinner"> <span class="triple-spinner__ring triple-spinner__ring_outer"></span> <span class="triple-spinner__ring triple-spinner__ring_middle"></span> <span class="triple-spinner__ring triple-spinner__ring_inner"></span> </div> <style> .triple-spinner { position: relative; width: 120px; height: 120px; display: grid; place-items: center; color: #5b8def; } .triple-spinner__ring { position: absolute; border-radius: 50%; border: 3px solid transparent; border-top-color: #5b8def; border-right-color: rgba(91, 141, 239, 0.5); border-left-color: rgba(99, 173, 255, 0.4); box-shadow: 0 0 18px rgba(91, 141, 239, 0.25); } .triple-spinner__ring_outer { width: 100%; height: 100%; animation: triple-spin 1.6s linear infinite; } .triple-spinner__ring_middle { width: 78%; height: 78%; animation: triple-spin 1.2s linear infinite reverse; } .triple-spinner__ring_inner { width: 52%; height: 52%; animation: triple-spin 0.9s linear infinite; } @keyframes triple-spin { to { transform: rotate(360deg); } } </style>
Spinner triple 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.