🌏 Translated with the assistance of DeepSeek and ChatGPT

CountTo

A number count-up animation component, commonly used for displaying values in data panels, stat cards, and similar scenarios.

Basic Usage

Set the target value with the to prop, and CountTo automatically counts from from (default 0) to to after mounting. Use the duration prop to set the animation length and the precision prop to set the number of decimal places.

Default:0

1.5s:0

Precision:0.00

Hide source code

Formatting

Enable thousands separators with the separator prop. The formatter prop allows fully customizing how the value is displayed, such as adding units or currency symbols.

Separator:0

Separator + precision:0.00

Formatter:$0.00

Hide source code

Delayed Start

Use the startDelay prop to make CountTo wait for a specified period after mounting before starting the count-up animation.

Start after 1.5s:0

Hide source code

Manual Control

Use the autoplay prop to control whether the count-up starts automatically. CountTo also exposes the start, pause, resume, and reset methods for manual control over the animation: start plays from the beginning, pause pauses the current animation, resume continues from where it was paused, and reset resets the playback according to the prop state and continues automatically if autoplay is enabled.

0

Hide source code

Reactive Updates

When the to prop changes, CountTo counts from the currently displayed value to the new target; if autoplay is false, it updates directly to the new target value.

0

Hide source code

Custom Content

CountTo provides the default slot to customize how the value is rendered, receiving the current display text text and the numeric value value.

Custom slot: Score: 0 (0)

With progress color:0%

Hide source code

API

CountToProps

Attribute	Type	Optional	Default	Description	Version
to	number	False		The target value of the CountTo animation.	0.2.0
from	number	True		The starting value of the CountTo animation.	0.2.0
duration	number	True	1000	The duration of the CountTo animation (ms).	0.2.0
precision	number	True	0	The number of decimal places to keep when CountTo displays the value.	0.2.0
startDelay	number	True	0	The delay before CountTo starts the animation.	0.2.0
autoplay	boolean	True	true	Whether CountTo starts the animation automatically after mounting.	0.2.0
separator	boolean	True	false	Whether to enable thousands separators.	0.2.0
formatter	(value: number) => string	True		The custom formatting function of CountTo.	0.2.0

CountToEvents

Event	Parameter	Description	Version
start		Triggered when CountTo starts the animation.	0.2.0
end		Triggered when the CountTo animation finishes.	0.2.0

CountToSlots

Slot	Parameter	Description	Version
default	text: string, value: number	Customize the value rendering of CountTo.	0.2.0

CountToExpose

Attribute	Type	Optional	Default	Description	Version
start	() => void	False		(Re)start the CountTo count-up animation.	0.2.0
pause	() => void	False		Pause the CountTo count-up animation.	0.2.0
resume	() => void	False		Resume the interrupted CountTo count-up animation.	0.2.0
reset	() => void	False		Reset the CountTo count-up state.	0.2.0