Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Creating Animated Counter using HTML, CSS, and JavaScript
An animated counter is a display that smoothly transitions from one number to another, typically starting from 0 and counting up to a target value. This creates an engaging visual effect commonly used in dashboards, statistics displays, and landing pages.
In this article, we'll create an animated counter using HTML for structure, CSS for styling, and JavaScript for the animation logic.
Steps for Creating Animated Counter
Follow these steps to build the animated counter:
- Create two div elements: one container for styling and one to display the counter value.
- Style the container class using height, width, border-radius, background-color, and text color properties.
- Use flexbox with display: flex, justify-content, and align-items to center the counter.
- Implement the animateCounter() function that accepts start value, end value, and duration in milliseconds.
- Calculate stepTime to control animation speed using the difference between start and end values divided by duration.
- Use setInterval() to update the counter and clearInterval() to stop when the target is reached.
Complete Example
<html>
<head>
<title>Animated Counter using HTML, CSS, and JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.container {
background-color: #031926;
color: white;
border-radius: 15px;
height: 150px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
margin: 20px;
}
#counter {
color: #00d4aa;
margin-left: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #00d4aa;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
</style>
</head>
<body>
<h2>Animated Counter Demo</h2>
<div class="container">
Counter: <span id="counter">0</span>
</div>
<button onclick="startCounter()">Start Animation</button>
<button onclick="resetCounter()">Reset</button>
<script>
function animateCounter(start, end, duration) {
let counter = document.getElementById('counter');
let stepTime = Math.abs(Math.floor(duration / (end - start)));
let current = start;
let timer = setInterval(() => {
current++;
counter.textContent = current;
if (current === end) {
clearInterval(timer);
}
}, stepTime);
}
function startCounter() {
animateCounter(0, 100, 2000); // Count to 100 in 2 seconds
}
function resetCounter() {
document.getElementById('counter').textContent = '0';
}
// Auto-start the animation
window.onload = function() {
setTimeout(() => {
startCounter();
}, 1000);
};
</script>
</body>
</html>
How the Animation Works
The animateCounter() function creates smooth counting animation:
- stepTime calculation determines how fast each number increment occurs
-
setInterval() repeatedly updates the display every
stepTimemilliseconds - current++ increments the counter value by 1 each step
- clearInterval() stops the animation when the target value is reached
Customization Options
You can easily customize the counter by modifying these parameters:
// Different animation examples animateCounter(0, 500, 3000); // Count to 500 in 3 seconds animateCounter(10, 50, 1000); // Count from 10 to 50 in 1 second animateCounter(0, 1000, 5000); // Count to 1000 in 5 seconds
Conclusion
This animated counter uses setInterval() and clearInterval() methods to create smooth number transitions. The technique is perfect for displaying statistics, achievements, or any numerical data that benefits from animated presentation.
19K+ Views
