CSS-Zone
Two clock hands spinning independently. 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="clock-loader"> <span class="clock-loader__hand clock-loader__hand_hour"></span> <span class="clock-loader__hand clock-loader__hand_minute"></span> </div> <style> .clock-loader{ position:relative; width:90px; height:90px; border-radius:50%; border:3px solid rgba(91,141,239,0.35); box-shadow: inset 0 0 0 1px rgba(91,141,239,0.2), 0 10px 24px rgba(91,141,239,0.18); display:grid; place-items:center; } .clock-loader__hand{ position:absolute; width:3px; border-radius:999px; background: linear-gradient(180deg,#5b8def,#9a6bff); transform-origin: bottom center; bottom:50%; left:50%; } .clock-loader__hand_hour{height:28px; animation: clock-hour 6s linear infinite;} .clock-loader__hand_minute{height:38px; animation: clock-minute 2s linear infinite;} @keyframes clock-hour{to{transform:rotate(360deg);}} @keyframes clock-minute{to{transform:rotate(720deg);}} </style>
Loader de reloj 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.