RollingNumber

The built-in rollingnumber tag — an animated counter that rolls up to its value the first time it scrolls into view. Usage, options, and live examples.

A built-in tag for an animated counter — the digits roll to value, re-animating each time the value changes, the way a live dashboard figure ticks as it updates. It renders inline, so it drops into a sentence or heading, and the usual size, color, and fw props style it. Give it a value to show; the roll runs over 600 ms by default. On a static page it shows the final value (there’s no value change to animate).

Use it as {% rollingnumber value='1000' %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'rollingnumber', …).

A styled stat

A large grape-colored count, grouped with commas by default.

A faster, linear roll

Shorten animationDuration (in milliseconds) and set timingFunction='linear' for a steady, quick count.

A decimal stat

decimalScale fixes the number of decimal places — here a 4.9 rating shown to one decimal — and animationDuration lengthens the roll.

Without comma grouping

Comma grouping is on by default. Set thousandSeparator=false to count a bare number — useful for years, IDs, or counts that shouldn’t read as a quantity.

Prefix and suffix

prefix and suffix wrap the number with fixed text — a currency symbol, a percent sign, a unit — so the whole figure rolls as one.

With other components

Because it renders inline, a rolling stat drops into any other component’s body — here as the headline figure in a card composed in Python.

Attributes

CSS Selectors

Target the rendered element through its island marker — [data-aardvark-island="RollingNumber"] — or through the Mantine Styles API classes (.mantine-RollingNumber-root and its inner parts):

/* Every rendered RollingNumber carries this island marker */
[data-aardvark-island="RollingNumber"] { }

/* Mantine Styles API class on the root element */
.mantine-RollingNumber-root { }
.mantine-RollingNumber-digit { }
.mantine-RollingNumber-char { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert: