Cómo animar un contador numérico en la interfaz
Cómo animar un contador sin que los dígitos salten, con una curva que aterriza en el valor exacto, formato por idioma y un solo anuncio para lectores de pantalla.
Idea clave
Un contador funciona cuando el número es lo importante, como un total de panel o un resultado que el usuario acaba de conseguir. Anima el valor con una curva que desacelera y termina exactamente en la cifra real, usa dígitos de ancho fijo para que el texto no salte y aplica el formato del idioma al final. Anuncia el valor final una vez, no en cada fotograma.
Cuándo ayuda un contador y cuándo engaña
Contar hacia arriba llama la atención sobre una cifra, lo que sirve para un resultado que el usuario provocó. Sirve menos para datos que simplemente cargaron, y puede engañar si el número todavía cambia. Nunca animes hacia un valor que no tienes: si la cifra es una estimación, muéstrala como tal.
Anima el valor, no el diseño
El número es texto, y cambiar el texto cambia el ancho. Los dígitos proporcionales hacen temblar la línea, así que usa font-variant-numeric: tabular-nums o un contenedor de ancho fijo. Mantén quieto el resto del diseño mientras cambian los dígitos.
Desacelera y aterriza exactamente
Un contador debe frenar al acercarse al objetivo y detenerse en el valor real. Contar en lineal parece mecánico; pasarse y rebotar parece un juego. Usa una curva que desacelere y haz que el último fotograma sea exactamente el número que quieres mostrar.
Da formato para quien lee
Los separadores de miles, los decimales y los símbolos de moneda dependen del idioma. Anima el valor bruto y aplícale formato en cada actualización o al final. Redondea de forma coherente y evita mostrar decimales que nunca se asientan.
Accesibilidad: anuncia el resultado una vez
Un lector de pantalla debe oír el valor final, no cada fotograma intermedio. Mantén la región viva en silencio durante el conteo y actualízala al final, o expón el número final en la etiqueta accesible desde el principio. Quien prefiere movimiento reducido debe ver la cifra de inmediato.
Dónde encaja ExodeUI
ExodeUI es una herramienta de navegador y escritorio para UI y animación interactivas, con máquinas de estados, física de muelles, entradas y eventos, guardada como un único archivo .exode JSON abierto, con runtimes para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI y Flutter. Un contador es lo bastante simple para hacerlo en código; usa una herramienta como ExodeUI solo si el mismo movimiento debe compartirse y editarse entre plataformas.
Principios clave para recordar
- Usa un contador cuando el número es lo importante, no para cada valor
- Los dígitos de ancho fijo evitan que el texto tiemble
- Desacelera y aterriza exactamente en la cifra real
- Aplica el formato del idioma del usuario
- Anuncia el valor final una vez, no en cada fotograma
Preguntas frecuentes
Fuentes
- font-variant-numeric — MDN Web Docs
- ARIA live regions — MDN Web Docs
- prefers-reduced-motion — MDN Web Docs