Count Up
`<pura-count-up>` animates a number from `from` to `to` with eased counting. It starts on first view by default (IntersectionObserver), supports `decimals`, a thousands `separator`, and `prefix`/`suffix` for currency or percentages, and exposes `start()` / `reset()`. The server renders the final value so the number is correct and accessible without JS, and under reduced motion the client skips the tween and shows the target immediately. It mirrors the live number in `data-pura-count-up-value` and registers in `window.__puraCountUps` for agent enumeration.
Preview
<pura-count-up to="1284" separator=","></pura-count-up>
<pura-count-up to="99.9" decimals="1" suffix="%"></pura-count-up>
<pura-count-up to="4200" prefix="$" separator="," duration="2000"></pura-count-up>
<!-- Trigger manually -->
<pura-count-up to="500" start="manual" id="score"></pura-count-up>
<script>document.querySelector('#score').start();</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
to | number | 0 | Target number to count up (or down) to. Required. |
from | number | 0 | Starting number. |
duration | number | token --pura-duration-6 | Tween length in milliseconds. |
decimals | number | 0 | Fixed decimal places. |
separator | string | — | Thousands separator, e.g. ",". |
prefix | string | — | String prepended to the number, e.g. "$". |
suffix | string | — | String appended to the number, e.g. "%". |
start | "view" | "load" | "manual" | view | When to begin: on first intersection, immediately on load, or only via start(). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/count-up.js"></script>import "./pura/lib/count-up.js";