Number Ticker
A number that counts up to its value when it scrolls into view, and re-animates whenever the value changes. Built for stats sections and live dashboards. Requires the PetalNumberTicker hook from the petal_components JS bundle. The final value is rendered server-side, so the number is correct without JavaScript.
Basic number ticker
Give it a unique id (required) and a value. The counter runs from start_value (0 by default) to value when the element enters the viewport.
Formatting
Use prefix and suffix to wrap the number, and decimal_places to set the precision shown while counting. Formatting runs through Intl.NumberFormat, so thousands separators and decimal marks follow the browser locale by default. Pass locale to pin a specific one, like de-DE.
Live updates
Bind value to an assign and the ticker re-animates whenever it changes, counting from the previous value to the new one instead of restarting at start_value. Click the button to see it.
Stats row
The classic marketing strip: a row of tickers with small labels underneath. Each ticker needs its own unique id.
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
extra classes (set font size/weight here) |
decimal_places
|
integer |
0
|
decimal places to show while counting |
duration
|
integer |
1500
|
animation length in milliseconds |
id*
|
string |
||
locale
|
string |
nil
|
BCP 47 locale for number formatting (e.g. "de-DE"); defaults to the browser locale |
prefix
|
string |
nil
|
e.g. "$" |
rest
|
global |
||
start_value
|
any |
0
|
where the first animation counts from |
suffix
|
string |
nil
|
e.g. "+" or "%" |
value*
|
any |
the target number (integer or float) |