Count up
stable 0.5 kB<hkCountUp>Animates a number into view and retriggers when the target changes. The final value is in the DOM the whole time, so it is never read as a partial figure.
#directive#number
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| countTo | number | 0 | Target value. |
| countDuration | number | 1600 | Animation length in milliseconds. |
| countPrefix / countSuffix | string | '' | Text either side of the number. |
| countDecimals | number | 0 | Fraction digits held during the count. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-countup-ease | cubic-bezier(0.16, 1, 0.3, 1) | Easing curve. |
Accessibility
- The element is aria-live="off" and carries the final value, so screen readers announce the figure once, not every frame.
- prefers-reduced-motion jumps straight to the target.