Web
Web · Rolling number counter
Tally
Digits turn over like an odometer.
A rolling number counter where every digit is a column that turns to its next value, springs into place and follows any locale or currency, including Indian grouping.
Demo
A recording of the demo. Open it in a new tab
What it does
- 01
Digits are keyed by place value, so 999 → 1,000 only adds the new column
- 02
Big jumps spin extra turns; rapid changes keep their momentum
- 03
Formatting comes from Intl.NumberFormat, so any locale or currency works
- 04
Screen readers hear the full value; reduced motion makes changes instant
Use it
git clone https://github.com/YagnikBarasiya23/tally-rolling-number.git
# copy tally.js and tally.css into your project<link rel="stylesheet" href="tally.css">
<span id="total"></span>
<script type="module">
import Tally from './tally.js';
const total = new Tally(document.querySelector('#total'), {
value: 1248650,
locale: 'en-IN',
format: { style: 'currency', currency: 'INR', maximumFractionDigits: 0 },
});
total.set(1296650);
</script>Every option, the technique behind the motion and the accessibility notes are in the README on GitHub
More components
All 10- Web
Get in touch
Open for freelance projects, contract roles and collaborations — mobile apps and full-stack products in particular. WhatsApp gets the fastest reply.
- Phone
- +91 70488 09875
- Based in
- Rajkot, Gujarat, India
- Elsewhere