Skip to content

component

Loader Counter

By Amr Rashed

Details

Summary

You might think that this is another Counter component but Loader Counter makes numbers feel like progress.

Description

Not just another counter. This one actually loads like a loader and does it all Live Demo 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

Rank history

Daily rank per list, from the first snapshot — lower is better.

15011001150119668/148/228/309/79/15
  • All · #1423