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!
Similar Reads
How to Create Text Animation Effect using JavaScript ? Creating text animations in JavaScript can add an extra layer of interactivity and engagement to a website or application. By using JavaScript, we can create text that moves, fades, changes color, or transforms in other ways. Animating text can also help convey important information or messages in a
2 min read
How to add fade-in effect using pure JavaScript ? The fade effect is described as the gradual increase and decrease in the opacity of the selected portion. In other words, the fade effect is termed as the increase and decrease in opacity with respect to time. When this effect is applied with a gradual increase in the opacity it is known as the fade
4 min read
How to add fade-out effect using pure JavaScript ? The fade effect is described as the gradual increase and decrease in the opacity of the selected portion. In other words, the fade effect is termed as the increase and decrease in opacity with respect to time. When this effect is applied with a gradual decrease in the opacity it is known as the fade
4 min read
How to make your own countUp.js plugin using JavaScript ? prerequisite: Document Object Model ( DOM )Â Use of Classes in ES6 If you are a beginner in JavaScript and have basic programming knowledge then don't worry, you have landed in a perfect place. Let us divide the problem into multiple segments: Implementing a simple structure using HTML.Providing a ba
2 min read
How to make Incremental and Decremental counter using HTML, CSS and JavaScript ? While visiting different shopping websites like Flipkart and Amazon you have seen a counter on each product, that counter is used to specify the quantity of that product. Hence, the counter is a very useful part of many websites. In this article, we will design a counter using HTML, CSS, and JavaScr
2 min read