How to make animated counter using JavaScript ?

Last Updated : 03 Oct, 2024

Creating an animated counter with JavaScript is an easy way to make your website more interactive. It smoothly increases or decreases numbers, which is great for displaying stats or other dynamic content. You can easily customize the speed and timing using HTML, CSS, and JavaScript.

Approach :

Making an Animated Counter Using JavaScript:

HTML Structure: Use an HTML element, such as a <div> or <span>, to display the counter value.
CSS for Styling: Add basic CSS to style the counter, making it match your website’s design seamlessly.
JavaScript Logic:
- Use the setInterval() function in JavaScript to update the counter value at regular intervals.
- Adjust the interval time to control the speed of the animation.
- Use clearInterval() to stop the counter once it reaches the desired value.

Example 1: Animated Counter from 0 to 1000

In this example, we use JavaScript to create an animated counter that increments from 0 to 1000. The setInterval() method repeatedly calls the updated() function, which updates the counter's value. Once the value of the upto variable reaches 1000, the clearInterval() method stops the counter.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Animated Counter</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

        #counter {
            font-size: 3rem;
            font-weight: bold;
            color: #4CAF50;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <p>COUNTS</p>
    <div id="counter">0</div>

    <script>
        let upto = 0;
        let counts = setInterval(updated, 10);

        function updated() {
            let count = document.getElementById("counter");
            count.innerHTML = ++upto;
            if (upto === 1000) {
                clearInterval(counts);
            }
        }
    </script>
</body>

</html>

Output:

Example 2: Decrement Counter from 1000 to 0

In this example, the counter starts at 1000 and decrements down to 0. JavaScript's setInterval() function is used to decrement the counter, and once the counter reaches 0, the clearInterval() function stops the countdown. We have added some basic CSS styles to make the webpage visually appealing.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Decrementing Counter</title>
    <style>
        body {
            background-color: green;
            text-align: center;
            font-family: Arial, sans-serif;
        }

        #counter {
            color: white;
            font-size: 3rem;
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <p>COUNTS DECREMENT</p>
    <div id="counter">1000</div>

    <script>
        let upto = 1000;
        let counts = setInterval(updated, 10);

        function updated() {
            let count = document.getElementById("counter");
            count.innerHTML = --upto;
            if (upto === 0) {
                clearInterval(counts);
            }
        }
    </script>
</body>

</html>

Output:

These examples show how to create a simple animated counter that can either increment or decrement, with control over the speed and stopping point. You can easily customize the starting value, ending value, and speed to fit your needs!