About Loader Counter
Not just another counter. This one actually loads like a loader and does it all
Why this component?
You might think that this is another Counter component but Loader Counter makes numbers feel like progress. It blends a natural "loader" pacing (fast-slow with micro-pauses) with clean, production-ready formatting and typography.
Highlights
Authentic Loader Feel - Not just linear counting. Real loading behavior with dynamic pauses and that classic slow finish
Smart Duration - Automatically scales timing based on your number range
Locale-aware formatting (e.g., 1,000 vs 1.000) with Auto or Custom locale
Natural K/M/B progression with smart decimals for big numbers (e.g., 9.5K → 10K) - Good for showing financial values.
Color fade between two colors during the count for creative motion.
Prefix / Suffix with individual colors and spacing
Start on view + Replay for scroll-triggered loops
Extended Font control (size, weight, letter-spacing, line height, alignment)
Accessibility first - ARIA labels, reduced motion support, screen reader announcements
How to use
Insert Loader Counter → set To (e.g., 100000).
Choose Style → Loader for organic pacing or Normal for linear counter..
Leave Duration on Auto or set Custom seconds.
Turn Format On for thousands separators; switch Locale to Auto or Custom (e.g., `en-US`, `nl-NL`).
Optional: Shorten to show K/M/B, set Color fade, Prefix/Suffix, and On view / Replay.
Notes
Auto Duration uses range-aware timing so big jumps don’t finish unrealistically fast.
Locale only affects formatting when Format is On.
Color fade animates the number; prefix/suffix keep their own colors.
Accessibility: announces updates with `aria-live="polite"` and uses tabular numerals.
Perfect for
Loading percentages or loading states
Revenue/sales counters with big numbers K,M,B
Social proof metrics - Followers, view, likes. etc
Dashboard KPIs
Creative counters with color fade while counting
Achievement unlocks
Any number that deserves drama
