Counter Widget
The Counter Widget animates a number counting up from 0 to a target value with smooth interpolation. It's perfect for displaying statistics, metrics, achievements, and any numerical data that needs to make an impact.
Basic Usage
1<div data-type="counter"
2 data-end-number="1000"
3 data-decimal="false"
4 data-duration-animation="4"
5 data-start="1"
6 class="text-6xl font-bold text-purple-600">
7</div>
8Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| data-type | string | - | Must be "counter" |
| data-end-number | number | 1000 | Final number to count to |
| data-decimal | string | "false" | Show decimal places: "true" or "false" |
| data-duration-animation | number | 4 | How long counting takes in seconds |
| data-start | number | 0 | When counting starts in seconds |
Animation Behavior
Counting Animation
The counter widget creates a smooth counting animation:
- Before start: Shows 0
- During animation: Smoothly counts up with cubic easing
- After animation: Shows final number
Number Formatting
- Integers: Uses
toLocaleString()for comma separation (e.g., "1,000,000") - Decimals: Shows 2 decimal places (e.g., "1,234.56")
Examples
Simple Counter
1<div class="relative w-full h-full bg-green-100" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <div class="text-8xl font-bold text-green-800"
4 data-type="counter"
5 data-end-number="1000000"
6 data-start="1"
7 data-duration-animation="4">
8 </div>
9 <div class="text-3xl text-green-600 mt-4"
10 data-type="text"
11 data-animate="fade"
12 data-start="5"
13 data-duration-animation="2">
14 Downloads
15 </div>
16 </div>
17</div>
18Multiple Counters
1<div class="relative w-full h-full bg-blue-900" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <!-- First counter -->
4 <div class="text-6xl font-bold text-blue-200 mb-4"
5 data-type="counter"
6 data-end-number="50000"
7 data-start="0"
8 data-duration-animation="3">
9 </div>
10 <div class="text-xl text-blue-300 mb-8"
11 data-type="text"
12 data-animate="fade"
13 data-start="3"
14 data-duration-animation="1">
15 Users
16 </div>
17
18 <!-- Second counter -->
19 <div class="text-6xl font-bold text-blue-200 mb-4"
20 data-type="counter"
21 data-end-number="1000000"
22 data-start="4"
23 data-duration-animation="3">
24 </div>
25 <div class="text-xl text-blue-300"
26 data-type="text"
27 data-animate="fade"
28 data-start="7"
29 data-duration-animation="1">
30 Videos Created
31 </div>
32 </div>
33</div>
34Decimal Counter
1<div class="relative w-full h-full bg-purple-100" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <div class="text-7xl font-bold text-purple-800"
4 data-type="counter"
5 data-end-number="99.9"
6 data-decimal="true"
7 data-start="1"
8 data-duration-animation="4">
9 </div>
10 <div class="text-3xl text-purple-600 mt-4"
11 data-type="text"
12 data-animate="fade"
13 data-start="5"
14 data-duration-animation="2">
15 % Uptime
16 </div>
17 </div>
18</div>
19Styling Options
Text Sizes
1<!-- Small counter -->
2<div class="text-2xl" data-type="counter" data-end-number="100">Small</div>
3
4<!-- Medium counter -->
5<div class="text-5xl" data-type="counter" data-end-number="1000">Medium</div>
6
7<!-- Large counter -->
8<div class="text-8xl" data-type="counter" data-end-number="10000">Large</div>
9Font Weights
1<!-- Light -->
2<div class="font-light" data-type="counter" data-end-number="100">Light</div>
3
4<!-- Regular -->
5<div class="font-normal" data-type="counter" data-end-number="100">Regular</div>
6
7<!-- Bold -->
8<div class="font-bold" data-type="counter" data-end-number="100">Bold</div>
9
10<!-- Extra bold -->
11<div class="font-black" data-type="counter" data-end-number="100">Extra Bold</div>
12Colors
1<!-- Blue -->
2<div class="text-blue-600" data-type="counter" data-end-number="100">Blue</div>
3
4<!-- Green -->
5<div class="text-green-600" data-type="counter" data-end-number="100">Green</div>
6
7<!-- Red -->
8<div class="text-red-600" data-type="counter" data-end-number="100">Red</div>
9
10<!-- Purple -->
11<div class="text-purple-600" data-type="counter" data-end-number="100">Purple</div>
12Animation Timing
Fast Counter (2 seconds)
1<div data-type="counter"
2 data-end-number="1000"
3 data-duration-animation="2"
4 data-start="0">
5</div>
6Slow Counter (8 seconds)
1<div data-type="counter"
2 data-end-number="1000000"
3 data-duration-animation="8"
4 data-start="0">
5</div>
6Delayed Start
1<div data-type="counter"
2 data-end-number="5000"
3 data-start="3"
4 data-duration-animation="4">
5</div>
6Common Use Cases
Statistics Dashboard
1<div class="relative w-full h-full bg-gray-900" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <!-- Main stat -->
4 <div class="text-8xl font-bold text-white mb-4"
5 data-type="counter"
6 data-end-number="10000"
7 data-start="1"
8 data-duration-animation="3">
9 </div>
10
11 <!-- Stat label -->
12 <div class="text-3xl text-gray-300 mb-8"
13 data-type="text"
14 data-animate="fade"
15 data-start="4"
16 data-duration-animation="2">
17 Happy Customers
18 </div>
19
20 <!-- Supporting text -->
21 <div class="text-xl text-gray-400"
22 data-type="text"
23 data-animate="fade"
24 data-start="6"
25 data-duration-animation="2">
26 Join thousands of creators using Tintage
27 </div>
28 </div>
29</div>
30Achievement Counter
1<div class="relative w-full h-full bg-gradient-to-br from-yellow-400 to-orange-500" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <div class="text-9xl font-black text-white mb-4"
4 data-type="counter"
5 data-end-number="1000000"
6 data-start="1"
7 data-duration-animation="5">
8 </div>
9 <div class="text-4xl text-yellow-100 font-bold"
10 data-type="text"
11 data-animate="fade"
12 data-start="6"
13 data-duration-animation="2">
14 Videos Created
15 </div>
16 </div>
17</div>
18Performance Metrics
1<div class="relative w-full h-full bg-blue-900" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <div class="text-7xl font-bold text-blue-200 mb-4"
4 data-type="counter"
5 data-end-number="99.9"
6 data-decimal="true"
7 data-start="1"
8 data-duration-animation="4">
9 </div>
10 <div class="text-3xl text-blue-300"
11 data-type="text"
12 data-animate="fade"
13 data-start="5"
14 data-duration-animation="2">
15 % Success Rate
16 </div>
17 </div>
18</div>
19Best Practices
Number Selection
| Number Range | Recommended Duration | Use Case |
|---|---|---|
| 1-100 | 2-3 seconds | Small metrics |
| 100-10,000 | 3-4 seconds | Medium statistics |
| 10,000+ | 4-6 seconds | Large numbers |
| Decimals | 3-5 seconds | Percentages, rates |
Visual Design
- Large numbers: Use big font sizes (text-6xl to text-9xl) for impact
- High contrast: Ensure good readability with contrasting colors
- Bold fonts: Use bold or black font weights for emphasis
- Supporting text: Add labels and descriptions below counters
Timing
- Build anticipation: Start counter after other elements have appeared
- Appropriate speed: Match counting speed to the number size
- Smooth transitions: Use longer durations for large numbers
Advanced Techniques
Sequential Counters
1<div class="relative w-full h-full bg-gray-800" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <!-- First counter -->
4 <div class="text-6xl font-bold text-white mb-4"
5 data-type="counter"
6 data-end-number="50000"
7 data-start="0"
8 data-duration-animation="3">
9 </div>
10 <div class="text-xl text-gray-300 mb-8"
11 data-type="text"
12 data-animate="fade"
13 data-start="3"
14 data-duration-animation="1">
15 Users
16 </div>
17
18 <!-- Second counter -->
19 <div class="text-6xl font-bold text-white mb-4"
20 data-type="counter"
21 data-end-number="1000000"
22 data-start="4"
23 data-duration-animation="3">
24 </div>
25 <div class="text-xl text-gray-300"
26 data-type="text"
27 data-animate="fade"
28 data-start="7"
29 data-duration-animation="1">
30 Videos
31 </div>
32 </div>
33</div>
34Mixed with Other Widgets
1<div class="relative w-full h-full bg-green-100" data-type="container">
2 <!-- Title -->
3 <div class="absolute top-1/4 left-1/2 -translate-x-1/2 text-green-800 text-4xl font-bold text-center"
4 data-type="text"
5 data-animate="fade"
6 data-start="0"
7 data-duration-animation="2">
8 Our Impact
9 </div>
10
11 <!-- Counter -->
12 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
13 <div class="text-8xl font-bold text-green-800"
14 data-type="counter"
15 data-end-number="1000000"
16 data-start="2"
17 data-duration-animation="4">
18 </div>
19 <div class="text-2xl text-green-600 mt-4"
20 data-type="text"
21 data-animate="fade"
22 data-start="6"
23 data-duration-animation="2">
24 Lives Changed
25 </div>
26 </div>
27
28 <!-- Call to action -->
29 <div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-green-700 text-xl font-semibold text-center"
30 data-type="text"
31 data-animate="fade"
32 data-start="8"
33 data-duration-animation="2">
34 Be part of the change
35 </div>
36</div>
37Troubleshooting
Counter Not Animating
Problem: Number doesn't count up
Solutions:
- Check that
data-type="counter"is set correctly - Verify
data-end-numberis a valid number - Make sure
data-starttime is reasonable - Ensure
data-duration-animationis set
Number Formatting Issues
Problem: Numbers don't display correctly
Solutions:
- For integers: use
data-decimal="false"or omit the attribute - For decimals: use
data-decimal="true" - Large numbers automatically get comma separators
- Check that
data-end-numberis a valid number
Animation Too Fast/Slow
Problem: Counting speed doesn't feel right
Solutions:
- Adjust
data-duration-animationvalue - Longer duration = slower counting
- Shorter duration = faster counting
- Consider the size of your target number
Counter Overlapping
Problem: Multiple counters overlap
Solutions:
- Use different positioning classes
- Space out the
data-starttimes - Use different vertical positions
- Add margins between elements
Related Widgets
- Text Widget - For labels and descriptions
- Typewriter Widget - For text animations
- Container Widget - For grouping counter elements
Last updated: 2026-01-05