OneTaskBy Tim King · Updated
Stats Counter Generator
Animated Count-Up Numbers Section in HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Stats Counter works
A stats counter shows a row of headline numbers, such as customers served or years in business, that count up from zero as they scroll into view. Enter each value and label, choose the speed and colours, and copy the HTML, CSS and JavaScript.
Big numbers are quick social proof, and a short count-up draws the eye to them as the visitor scrolls past. The animation should be brief so the final figure is readable almost at once.
How the stats counter animates
Each value is written in full in the HTML, so search engines, screen readers and visitors without
JavaScript see the real number. When a value is half on screen, an IntersectionObserver starts a
count from zero to that number using requestAnimationFrame with an ease-out curve, then stops
watching it, so each stat animates once. The first number in the text is animated and anything
around it, such as a £ sign, a plus or a percent, is kept.
Accessibility
Visitors who have asked their system for reduced motion see the final numbers with no animation.
The stats are a description list, so each label is paired with its value for screen readers, and
font-variant-numeric: tabular-nums stops the digits jiggling while they count.
FAQ
Can I show decimals and thousands separators?
Yes. Write the value as you want it to end up, such as 4.9 or 12,000, and the counter keeps the same number of decimal places and uses commas only if your value has them.
Can I use suffixes like K or M?
Yes. Write £2.5M or 40K+ and only the number part counts up from zero, while the letters, currency signs and symbols around it stay exactly where you put them.
How is this different from the animated counter maker?
The animated counter maker styles one big number. The stats counter builds a whole section of labelled stats that each count up when they scroll into view.
Why does the count start only when I scroll to it?
Counting while the stats are off screen wastes the effect, because nobody sees it. Waiting until they are visible means every visitor sees the numbers land.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Animated Counter
Make a number count-up animation and copy the code.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.
Logo Scroller
Build a seamless infinite logo marquee in pure CSS.