Visualización de datos

Animated metric counter

Animated metric counter: Un gran número simple que surge desde un valor inicial hasta su objetivo en el momento en que aparece a la vista, sobrepasándose ligeramente antes de estabilizarse, con separadores de miles y un sufijo opcional.

Cómo usar Animated metric counter

Animated metric counter se presenta con el formato de vista previa «en línea» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`target`	`number`	`48200`	De 0 a 999999; paso 1
`startValue`	`number`	`0`	De 0 a 999999; paso 1
`decimals`	`number`	`0`	De 0 a 2; paso 1
`suffix`	`text`	`users`	Hasta 12 caracteres
`accent`	`color`	`#9BE15D`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Animated metric counter?

Animated metric counter está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Animated metric counter?

Los metadatos de React indican estas dependencias npm además de React: motion.

¿Qué detalles de accesibilidad se observan en Animated metric counter?

El código React de Animated metric counter incluye: atributos y manejadores (aria-hidden, aria-live). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Animated metric counter el movimiento reducido?

Animated metric counter consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Counting number readout de Fieldbook, de la categoría Visualización de datos.

2328Counting number readoutVisualización de datosUna estadística grande que cuenta hasta su valor en una curva de desaceleración, escribiendo el texto directamente en cada fotograma para que el diseño nunca se mueva.

Imagen fija del componente Rolling stat tiles de Fieldbook, de la categoría Visualización de datos.

2216Rolling stat tilesVisualización de datosUna fila de mosaicos de estadísticas cuyos números grandes avanzan dígito a dígito hasta alcanzar un nuevo valor en lugar de romperse.

Imagen fija del componente Concentric goal rings de Fieldbook, de la categoría Visualización de datos.

2128Concentric goal ringsVisualización de datosTres anillos de progreso anidados que se dibujan en secuencia junto a una lectura del valor objetivo y actual de cada objetivo.

Imagen fija del componente Spring Push Collapsible de Fieldbook, de la categoría Visualización de datos.

2052Spring Push CollapsibleVisualización de datosUna fila de configuración que abre un panel de detalles y empuja las filas debajo de él hacia abajo en un resorte compartido en lugar de un salto de altura.

Imagen fija del componente Visitor Map Card de Fieldbook, de la categoría Visualización de datos.

2264Visitor Map CardVisualización de datosUna amplia tarjeta de tráfico construida sobre un mapa burdo del mundo en mosaico, donde cada región está teñida por su participación y al pasar el cursor se cambia el titular a esa región.

Imagen fija del componente Before/After Code Diff de Fieldbook, de la categoría Visualización de datos.

2113Before/After Code DiffVisualización de datosDos paneles de código uno al lado del otro, etiquetados antes y después, con líneas agregadas y eliminadas teñidas y un efecto de enfoque flotante.