Loader Counter: Free UI Component by Amr Rashed

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.