component
Loader Counter
By Amr Rashed
Details
- Amr RashedAuthor
- componentType
- 2025-08-14Published
- 2025-08-30Updated
- 2025-08-09Added
- LoadersCategories
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.
- All · #1423