.menu
.search
CHECKING STATUS
I AM LISTENING TO
|
  • ♩
  • ♪
  • ♫
  • ♬
  • ♩
  • ♪
  • ♫
  • ♬
HOME / BLOG

10 Popular JavaScript CountUp Solutions: A Comprehensive Guide

20. March 2025
/
.SHARE

Table of Contents

In the world of interactive web design, animated counters have become a staple for showcasing statistics, achievements, and metrics. These “countup” animations, which typically count from zero to a specified number, create a dynamic visual effect that draws user attention to important numerical data.

Whether you’re looking to highlight your website’s visitor count, showcase product sales, or emphasize any statistical achievement, JavaScript countup solutions can add that extra layer of engagement to your web project.

In this comprehensive guide, we’ll explore 10 of the most popular JavaScript countup libraries available in 2025, detailing their features, implementation, and what makes each unique.

This is an update to an article I wrote a couple of years ago. Still finding some content that has not been moved to the new setup ;)

1. CountUp.js

CountUp.js is a dependency-free, lightweight JavaScript class that has become one of the most widely used counting solutions on the web.

Key Features:

  • No dependencies
  • Highly customizable animation
  • Supports counting in either direction
  • Smart easing for large numbers
  • Lightweight (under 9KB)
  • Scroll-triggered animations

Implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
// Basic implementation
const countUp = new CountUp('targetElementId', 2500);
if (!countUp.error) {
  countUp.start();
} else {
  console.error(countUp.error);
}
 
// With options
const options = {
  startVal: 0,
  duration: 2.5,
  decimalPlaces: 2,
  useEasing: true,
  useGrouping: true,
  separator: ',',
  decimal: '.',
  prefix: '$',
  suffix: ' USD'
};
 
const countUp = new CountUp('targetElementId', 2500, options);
countUp.start();
 
 

Links:

2. PureCounter.js

PureCounter.js is a simple yet highly configurable vanilla JavaScript library for creating counting animations.

Key Features:

  • Extremely lightweight (1.4KB gzipped)
  • No dependencies
  • Built-in lazy loading
  • Configurable per element via data attributes
  • Support for currency, file size, and decimal formatting
  • Scroll-triggered animations

Implementation:

1
2
3
4
5
6
7
8
9
10
11
 
<!-- HTML Setup -->
<span class="purecounter" data-purecounter-start="0" data-purecounter-end="5000" data-purecounter-duration="2">0</span>
 
<!-- JavaScript Setup -->
<script src="https://cdn.jsdelivr.net/npm/@srexi/purecounterjs/dist/purecounter_vanilla.js"></script>
<script>
  new PureCounter();
</script>
 
 

Advanced Configuration:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
new PureCounter({
  selector: '.purecounter',
  start: 0,
  end: 100,
  duration: 2,
  delay: 10,
  once: true,
  decimals: 0,
  legacy: true,
  filesizing: false,
  currency: false,
  separator: false
});
 
 

Links:

3. jQuery CounterUp (Original)

The original CounterUp is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible in the viewport.

Key Features:

  • Simple implementation
  • Scroll-triggered counting
  • Support for integers, floats, and formatted numbers
  • Dependency on jQuery and Waypoints.js

Implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!-- Include required libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>
 
<!-- HTML -->
<span class="counter">1,234,567.00</span>
 
<!-- Initialize -->
<script>
  $('.counter').counterUp({
    delay: 10,
    time: 1000
  });
</script>
 
 

Links:

4. Counter-Up2

Counter-Up2 is the modern successor to the original jQuery CounterUp plugin, removing jQuery dependencies for better performance.

Key Features:

  • No jQuery dependency
  • Smaller file size
  • Modern JavaScript practices
  • Simple API
  • Works with any JavaScript framework

Implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!-- Include the script -->
<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
 
<!-- HTML -->
<h1 class="counter">1,234,567.00</h1>
 
<!-- Initialize -->
<script>
  const counterUp = window.counterUp.default;
  const el = document.querySelector('.counter');
  
  // Simple
  counterUp(el);
  
  // With options
  counterUp(el, {
    duration: 1000,
    delay: 16,
  });
</script>
 
 

Links:

5. Animated Counter by Alimul Hasan

This lightweight vanilla JavaScript library provides a simple way to create countup animations with minimal configuration.

Key Features:

  • Vanilla JavaScript implementation
  • No dependencies
  • Easy to implement
  • Customizable duration and easing

Implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!-- HTML -->
<span class="ac" data-target="5000">0</span>
 
<!-- JavaScript -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const counters = document.querySelectorAll('.ac');
    
    counters.forEach(counter => {
      const target = +counter.getAttribute('data-target');
      const duration = 2000; // ms
      const increment = target / (duration / 16); // 60fps
      
      let current = 0;
      
      const updateCounter = () => {
        current += increment;
        counter.textContent = Math.floor(current);
        
        if (current < target) {
          requestAnimationFrame(updateCounter);
        } else {
          counter.textContent = target;
        }
      };
      
      updateCounter();
    });
  });
</script>
 
 

Links:

6. KUTE.js Counter Plugin

KUTE.js is a fully featured JavaScript animation engine with a specific counter plugin for numerical animations.

Key Features:

  • Part of a full animation framework
  • Multiple easing functions
  • Supports decimal places
  • Highly customizable
  • Consistent performance

Implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!-- Include KUTE.js core and counter plugin -->
<script src="https://cdn.jsdelivr.net/npm/kute.js@2.2.0/dist/kute.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/kute.js@2.2.0/dist/kute-countup.min.js"></script>
 
<!-- HTML -->
<span id="number">0</span>
 
<!-- JavaScript -->
<script>
  KUTE.fromTo(
    '#number',
    { number: 0 },
    { number: 5000 },
    { duration: 2000, easing: 'easingCubicOut' }
  ).start();
</script>
 
 

Links:

7. simplyCountdown.js

simplyCountdown.js is a lightweight (<5KB) countdown/countup library with zero dependencies, offering multiple themes.

Key Features:

  • Works as both countdown and countup
  • Multiple built-in themes
  • Customizable styling
  • TypeScript support
  • No dependencies

Implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!-- Include the script -->
<script src="https://cdn.jsdelivr.net/npm/simplycountdown.js@1.7.0/dist/simplyCountdown.min.js"></script>
 
<!-- HTML -->
<div id="my-counter"></div>
 
<!-- JavaScript for Count Up -->
<script>
  simplyCountdown('#my-counter', {
    year: 2020,
    month: 5,
    day: 15,
    countUp: true,
    enableUtc: false,
    words: {
      days: {singular: 'day', plural: 'days'},
      hours: {singular: 'hour', plural: 'hours'},
      minutes: {singular: 'minute', plural: 'minutes'},
      seconds: {singular: 'second', plural: 'seconds'}
    }
  });
</script>
 
 

Links:

8. Odometer by HubSpot

Odometer by HubSpot is a JavaScript and CSS library for smoothly transitioning numbers with a realistic “spinning” effect.

Key Features:

  • Smooth spinning transitions
  • Responsive design
  • Customizable themes
  • Support for auto formatting
  • Works with any JavaScript framework

Implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!-- Include Odometer CSS and JS -->
<link rel="stylesheet" href="https://github.hubspot.com/odometer/themes/odometer-theme-minimal.css">
<script src="https://github.hubspot.com/odometer/odometer.js"></script>
 
<!-- HTML -->
<div id="odometer" class="odometer">0</div>
 
<!-- JavaScript -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
      odometer.innerHTML = 5000;
    }, 1000);
  });
</script>
 
 

Links:

9. animateNumber jQuery Plugin

animateNumber is a jQuery plugin that animates numbers with various formatting options.

Key Features:

  • Easy implementation
  • Customizable number formatting
  • Support for custom step functions
  • Adjustable animation speed

Implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!-- Include jQuery and the plugin -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.animateNumber.min.js"></script>
 
<!-- HTML -->
<span id="number">0</span>
 
<!-- JavaScript -->
<script>
  $('#number').animateNumber({
    number: 5000,
    numberStep: $.animateNumber.numberStepFactories.separator(','),
    easing: 'easeInQuad',
    duration: 2000
  });
</script>
 
 

Links:

10. Number-CounteUp

Number-CounteUp is a minimal JavaScript function that creates animated number counters with minimal code.

Key Features:

  • Ultra lightweight (about 10 lines of code)
  • No dependencies
  • Easy to customize
  • Simple implementation

Implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!-- HTML -->
<span id="counter">0</span>
 
<!-- JavaScript -->
<script>
  function animateCounter(id, start, end, duration) {
    let startTimestamp = null;
    const element = document.getElementById(id);
    
    function step(timestamp) {
      if (!startTimestamp) startTimestamp = timestamp;
      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
      const currentValue = Math.floor(progress * (end - start) + start);
      element.innerHTML = currentValue;
      
      if (progress < 1) {
        window.requestAnimationFrame(step);
      } else {
        element.innerHTML = end;
      }
    }
    
    window.requestAnimationFrame(step);
  }
  
  // Initialize counter
  animateCounter('counter', 0, 5000, 2000);
</script>
 
 

Links:

FAQ

What is the simplest way to implement a counter in JavaScript?

The simplest way is to use a variable and increment/decrement operators. For example:
1
2
3
4
5
6
7
 
let count = 0;
function increment() {
  count++;
  document.getElementById('counter').textContent = count;
}
 
This basic approach works well for simple applications without state management needs.

How do I create a countdown timer in JavaScript?

You can create a countdown timer using
1
2
3
 
setInterval()
 
to update the counter at regular intervals. Calculate the time difference between the target date and current date, then display the remaining time. For more sophisticated solutions, libraries like CountdownJS or SimplyCountdown.js offer ready-made solutions with additional features.

What’s the best way to implement a counter in React?

In React, the best practice is to use state management with useState hook for simple counters. For example:
1
2
3
 
const [count, setCount] = useState(0);
 
and then
1
2
3
 
setCount(count + 1)
 
to increment. For more complex applications, consider React-specific libraries like React-Counter-Up or using state management solutions like Redux or MobX.

How can I create an animated counter in JavaScript?

For animated counters, you can use requestAnimationFrame() for smooth transitions or leverage libraries like CountUp.js, GSAP, or anime.js. These libraries provide easing functions and timing controls to create visually appealing number transitions from one value to another.

What are closures and how do they relate to JavaScript counters?

Closures are a fundamental JavaScript concept often used in counter implementations. A closure is a function that remembers its outer variables and can access them. For counters, closures help maintain state:
1
2
3
4
5
6
7
8
 
function createCounter(initialValue) {
  let count = initialValue;
  return function() {
    return count++;
  };
}
 
This pattern creates private variables that persist between function calls.

What are some popular JavaScript counter libraries in 2024?

Popular counter libraries in 2024 include:
  • CountUp.js – For animated number counting
  • Flipdown.js – For flip-style countdown animations
  • React-Counter-Up – For React applications
  • SimplyCountdown.js – Lightweight countdown solution
  • TimeZZ – Clean, customizable countdown timers
These libraries provide ready-to-use solutions with various animation styles and customization options.

How can I make my JavaScript counter persist after page refresh?

To persist counter values after page refresh, use the browser’s storage APIs:
  • localStorage – For persistent storage:
    1
    2
    3
     
    localStorage.setItem('count', count);
     
  • sessionStorage – For session-only persistence:
    1
    2
    3
     
    sessionStorage.setItem('count', count);
     
Then retrieve the value when the page loads:
1
2
3
 
let count = parseInt(localStorage.getItem('count')) || 0;
 

What are best practices for JavaScript counter performance?

For optimal performance:
  • Use requestAnimationFrame instead of setInterval for smoother animations
  • Implement throttling/debouncing for rapid counter changes
  • Consider using Web Workers for computationally intensive counters
  • Minimize DOM updates by batching changes
  • Use CSS transitions when possible instead of JavaScript animations
These practices help ensure counters remain responsive and don’t impact overall page performance.

How do I implement a counter that works with user events?

To create an event-driven counter, attach event listeners to the relevant elements:
1
2
3
4
5
6
 
document.getElementById('increment').addEventListener('click', function() {
    count++;
    updateDisplay();
});
 
For more complex interactions, consider implementing observer patterns or using event-driven libraries.

What’s the difference between a counter and a ticker in JavaScript?

A counter typically describes a value that increments or decrements based on user actions or events. A ticker, on the other hand, usually refers to an automatically updating display that changes at regular intervals (like a stock ticker or countdown clock). Tickers often use setInterval or setTimeout to update automatically, while counters may update in response to specific events.

Thoughts

JavaScript countup libraries are powerful tools for enhancing user experience and drawing attention to important metrics on your website. Whether you need a simple solution like PureCounter.js or a more feature-rich library like CountUp.js, the options presented in this article provide versatile tools for implementing engaging numerical animations.

When choosing a countup library, consider your specific needs including:

  1. Dependencies – Do you want a standalone solution or are you already using jQuery?
  2. File size – How important is performance for your application?
  3. Features – Do you need special formatting, easing functions, or theme options?
  4. Ease of implementation – How quickly do you need to get your solution running?

By choosing the right countup library, you can create impressive, attention-grabbing numerical displays that enhance your website’s visual appeal and effectively communicate important metrics to your users.

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

RELATED POSTS

READ ABOUT IT

Day 28: FrankenWP – FrankePHP + WordPress – 7 Days of Docker

/ / / /

FrankenWP is a specialized WordPress Docker image built on FrankenPHP, which is a PHP application server built on top of the Caddy web server. This combination offers several advantages: This guide will walk you through setting up FrankenWP on your own server using Docker Compose, including all necessary configuration options and client connection details. Also […]

READ ABOUT IT

FrankenPHP in 2025: The Zombie App Server That Brought PHP Back From the Dead!

/ / / / / / /

Remember when people used to joke that PHP was dying? Well, in 2025, PHP is not only alive and kicking but thriving thanks to its Frankenstein-inspired application server that’s been taking the web development world by storm! What Is This Monster? FrankenPHP is the brainchild of Kévin Dunglas (the same genius behind API Platform) who […]

READ ABOUT IT

The Ultimate Guide to Presence Detection in JavaScript: What Works and Why

/ /

Hey there! Ever wondered how websites know when you’re actually looking at them, or if you’ve wandered off to make coffee? That’s presence detection in action – and it’s super useful for creating responsive, user-friendly web apps. In this guide, I’ll walk you through everything you need to know about detecting user presence with JavaScript […]

Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs


I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.

DISCOVER.

.PROJECTS - LEAD
.PROJECTS - I LOVE

.highlights

portalZINE® NMN
Alexander Gräf
Stettiner Str. Nord 20
D-49624 Löningen

© 2002-2025 portalZINE® NMN. All rights reserved.

.highlights

.PROJECTS - LEAD
.PROJECTS - I LOVE

PORTALZINE® NMN
Alexander Gräf
Stettiner Str. Nord 20
DE-49624 Löningen

PUSH THE BOUNDARIES OF YOUR PROJECT.