Ticker
The `<pura-ticker>` displays a number that animates (counting up or down) from the previous value to the target over a short duration, formatted with locale-aware thousands separators. Use it for dashboards, metrics, revenue counters, or statistics that change in real time. It is agent-native: it exposes `role="status"` with `aria-live`, mirrors its numeric state in stable `data-value`/`data-formatted` attributes (even during the animation), and registers each live instance in `window.__puraTickers`, letting agents and tools reliably enumerate and read all the tickers on the page.
Preview
<div style="display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;">
<pura-ticker id="receita" value="0" duration="1200" decimals="2" locale="en-US" prefix="$" label="Monthly revenue"></pura-ticker>
<pura-ticker id="taxa" value="0" duration="1200" decimals="1" locale="en-US" suffix="%" label="Conversion rate"></pura-ticker>
<button id="atualizar" type="button">Update values</button>
</div>
<script type="module">
const receita = document.getElementById("receita");
const taxa = document.getElementById("taxa");
receita.value = 128430.75;
taxa.value = 4.7;
document.getElementById("atualizar").addEventListener("click", () => {
receita.value = Math.round(Math.random() * 200000 * 100) / 100;
taxa.value = Math.round(Math.random() * 100 * 10) / 10;
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Target number; animates from the previous value when it changes. |
duration | number | 800 | Animation duration in ms (ignored under prefers-reduced-motion). |
decimals | number | inferred from value | Fixed number of decimal places; if omitted, inferred from the literal value. |
locale | string | document locale | Intl locale used for grouping and separators. |
prefix | string | "" | Text rendered before the number (e.g. "$"). |
suffix | string | "" | Text rendered after the number (e.g. "%"). |
label | string | none | Accessible label for the value (composes the aria-label). |
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/ticker.js"></script>import "./pura/lib/ticker.js";