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

<div data-type="counter" 
     data-end-number="1000" 
     data-decimal="false" 
     data-duration-animation="4" 
     data-start="1"
     class="text-6xl font-bold text-purple-600">
</div>

Attributes

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

How long counting takes in seconds

data-start

number

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

<div class="relative w-full h-full bg-green-100" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <div class="text-8xl font-bold text-green-800" 
         data-type="counter" 
         data-end-number="1000000" 
         data-start="1" 
         data-duration-animation="4">
    </div>
    <div class="text-3xl text-green-600 mt-4" 
         data-type="text" 
         data-animate="fade" 
         data-start="5" 
         data-duration-animation="2">
      Downloads
    </div>
  </div>
</div>

Multiple Counters

<div class="relative w-full h-full bg-blue-900" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <!-- First counter -->
    <div class="text-6xl font-bold text-blue-200 mb-4" 
         data-type="counter" 
         data-end-number="50000" 
         data-start="0" 
         data-duration-animation="3">
    </div>
    <div class="text-xl text-blue-300 mb-8" 
         data-type="text" 
         data-animate="fade" 
         data-start="3" 
         data-duration-animation="1">
      Users
    </div>
    
    <!-- Second counter -->
    <div class="text-6xl font-bold text-blue-200 mb-4" 
         data-type="counter" 
         data-end-number="1000000" 
         data-start="4" 
         data-duration-animation="3">
    </div>
    <div class="text-xl text-blue-300" 
         data-type="text" 
         data-animate="fade" 
         data-start="7" 
         data-duration-animation="1">
      Videos Created
    </div>
  </div>
</div>

Decimal Counter

<div class="relative w-full h-full bg-purple-100" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <div class="text-7xl font-bold text-purple-800" 
         data-type="counter" 
         data-end-number="99.9" 
         data-decimal="true" 
         data-start="1" 
         data-duration-animation="4">
    </div>
    <div class="text-3xl text-purple-600 mt-4" 
         data-type="text" 
         data-animate="fade" 
         data-start="5" 
         data-duration-animation="2">
      % Uptime
    </div>
  </div>
</div>

Styling Options

Text Sizes

<!-- Small counter -->
<div class="text-2xl" data-type="counter" data-end-number="100">Small</div>

<!-- Medium counter -->
<div class="text-5xl" data-type="counter" data-end-number="1000">Medium</div>

<!-- Large counter -->
<div class="text-8xl" data-type="counter" data-end-number="10000">Large</div>

Font Weights

<!-- Light -->
<div class="font-light" data-type="counter" data-end-number="100">Light</div>

<!-- Regular -->
<div class="font-normal" data-type="counter" data-end-number="100">Regular</div>

<!-- Bold -->
<div class="font-bold" data-type="counter" data-end-number="100">Bold</div>

<!-- Extra bold -->
<div class="font-black" data-type="counter" data-end-number="100">Extra Bold</div>

Colors

<!-- Blue -->
<div class="text-blue-600" data-type="counter" data-end-number="100">Blue</div>

<!-- Green -->
<div class="text-green-600" data-type="counter" data-end-number="100">Green</div>

<!-- Red -->
<div class="text-red-600" data-type="counter" data-end-number="100">Red</div>

<!-- Purple -->
<div class="text-purple-600" data-type="counter" data-end-number="100">Purple</div>

Animation Timing

Fast Counter (2 seconds)

<div data-type="counter" 
     data-end-number="1000" 
     data-duration-animation="2" 
     data-start="0">
</div>

Slow Counter (8 seconds)

<div data-type="counter" 
     data-end-number="1000000" 
     data-duration-animation="8" 
     data-start="0">
</div>

Delayed Start

<div data-type="counter" 
     data-end-number="5000" 
     data-start="3" 
     data-duration-animation="4">
</div>

Common Use Cases

Statistics Dashboard

<div class="relative w-full h-full bg-gray-900" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <!-- Main stat -->
    <div class="text-8xl font-bold text-white mb-4" 
         data-type="counter" 
         data-end-number="10000" 
         data-start="1" 
         data-duration-animation="3">
    </div>
    
    <!-- Stat label -->
    <div class="text-3xl text-gray-300 mb-8" 
         data-type="text" 
         data-animate="fade" 
         data-start="4" 
         data-duration-animation="2">
      Happy Customers
    </div>
    
    <!-- Supporting text -->
    <div class="text-xl text-gray-400" 
         data-type="text" 
         data-animate="fade" 
         data-start="6" 
         data-duration-animation="2">
      Join thousands of creators using Tintage
    </div>
  </div>
</div>

Achievement Counter

<div class="relative w-full h-full bg-gradient-to-br from-yellow-400 to-orange-500" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <div class="text-9xl font-black text-white mb-4" 
         data-type="counter" 
         data-end-number="1000000" 
         data-start="1" 
         data-duration-animation="5">
    </div>
    <div class="text-4xl text-yellow-100 font-bold" 
         data-type="text" 
         data-animate="fade" 
         data-start="6" 
         data-duration-animation="2">
      Videos Created
    </div>
  </div>
</div>

Performance Metrics

<div class="relative w-full h-full bg-blue-900" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <div class="text-7xl font-bold text-blue-200 mb-4" 
         data-type="counter" 
         data-end-number="99.9" 
         data-decimal="true" 
         data-start="1" 
         data-duration-animation="4">
    </div>
    <div class="text-3xl text-blue-300" 
         data-type="text" 
         data-animate="fade" 
         data-start="5" 
         data-duration-animation="2">
      % Success Rate
    </div>
  </div>
</div>

Best 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

<div class="relative w-full h-full bg-gray-800" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <!-- First counter -->
    <div class="text-6xl font-bold text-white mb-4" 
         data-type="counter" 
         data-end-number="50000" 
         data-start="0" 
         data-duration-animation="3">
    </div>
    <div class="text-xl text-gray-300 mb-8" 
         data-type="text" 
         data-animate="fade" 
         data-start="3" 
         data-duration-animation="1">
      Users
    </div>
    
    <!-- Second counter -->
    <div class="text-6xl font-bold text-white mb-4" 
         data-type="counter" 
         data-end-number="1000000" 
         data-start="4" 
         data-duration-animation="3">
    </div>
    <div class="text-xl text-gray-300" 
         data-type="text" 
         data-animate="fade" 
         data-start="7" 
         data-duration-animation="1">
      Videos
    </div>
  </div>
</div>

Mixed with Other Widgets

<div class="relative w-full h-full bg-green-100" data-type="container">
  <!-- Title -->
  <div class="absolute top-1/4 left-1/2 -translate-x-1/2 text-green-800 text-4xl font-bold text-center" 
       data-type="text" 
       data-animate="fade" 
       data-start="0" 
       data-duration-animation="2">
    Our Impact
  </div>
  
  <!-- Counter -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <div class="text-8xl font-bold text-green-800" 
         data-type="counter" 
         data-end-number="1000000" 
         data-start="2" 
         data-duration-animation="4">
    </div>
    <div class="text-2xl text-green-600 mt-4" 
         data-type="text" 
         data-animate="fade" 
         data-start="6" 
         data-duration-animation="2">
      Lives Changed
    </div>
  </div>
  
  <!-- Call to action -->
  <div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-green-700 text-xl font-semibold text-center" 
       data-type="text" 
       data-animate="fade" 
       data-start="8" 
       data-duration-animation="2">
    Be part of the change
  </div>
</div>

Troubleshooting

Counter Not Animating

Problem: Number doesn't count up

Solutions:

Check that data-type="counter" is set correctly
Verify data-end-number is a valid number
Make sure data-start time is reasonable
Ensure data-duration-animation is 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-number is a valid number

Animation Too Fast/Slow

Problem: Counting speed doesn't feel right

Solutions:

Adjust data-duration-animation value
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-start times
Use different vertical positions
Add margins between elements

Text Widget - For labels and descriptions
Typewriter Widget - For text animations
Container Widget - For grouping counter elements

PreviousTypewriter Widget NextImage Widget

Last updated 4 days ago

Basic Usage

Attributes

Animation Behavior

Counting Animation

Number Formatting

Examples

Simple Counter

Multiple Counters

Decimal Counter

Styling Options

Text Sizes

Font Weights

Colors

Animation Timing

Fast Counter (2 seconds)

Slow Counter (8 seconds)

Delayed Start

Common Use Cases

Statistics Dashboard

Achievement Counter

Performance Metrics

Best Practices

Number Selection

Visual Design

Timing

Advanced Techniques

Sequential Counters

Mixed with Other Widgets

Troubleshooting

Counter Not Animating

Number Formatting Issues

Animation Too Fast/Slow

Counter Overlapping

Related Widgets