CSS-Zone
Tres puntos que saltan como indicador de escritura. 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="dot-typing-loader"> <span></span><span></span><span></span> </div> <style> .dot-typing-loader{display:flex;gap:8px;align-items:center;} .dot-typing-loader span{ width:10px;height:10px;border-radius:50%; background:#5b8def;box-shadow:0 6px 12px rgba(91,141,239,.22); animation:dot-typing 1s ease-in-out infinite; } .dot-typing-loader span:nth-child(2){animation-delay:.12s;} .dot-typing-loader span:nth-child(3){animation-delay:.24s;} @keyframes dot-typing{0%,100%{transform:translateY(0);opacity:.7;}50%{transform:translateY(-8px);opacity:1;}} </style>
Loader de puntos al escribir 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.