Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating Animated Counter using HTML, CSS, and JavaScript
In this article, we will be exploring how to create an animated counter using JavaScript and basic HTML for designing.
An animated counter can be described as a display that counts an animation starting from 0 and ending at a specific number. This is generally used by popular websites for creating websites attractive and prettier.
How to create animated counters
We will be using native HTML, CSS, and JavaScript for creating animated counters. Below is the approach on how to create one.
We will be defining a div tag with an ID.
We will add a JavaScript code to the script tag at the above div.
Once the script tag is added, we can add the setInterval() method to execute the update function that will increment the count value.
Once the count value has reached the required count, it will stop executing until the counter is cleared using the clearInterval() method.
We can use the setInterval() method to repeat a given function at any given time
Example 1
In the below example, we create an animated counter with the help of the setInterval() and clearInterval() method. This will update the counter when the updated() method is called. We will call the clearInterval() method to clear the counter.
# index.html
<!DOCTYPE html>
<html lang="en">
<link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.container{
background-color: #016064;
}
p{
text-align: center;
}
</style>
<body onload="load()">
<p>
<div class="d-flex justify-content-center fs-1 fw-bold ">Welcome To Tutorials Point</div>
<div class="d-flex justify-content-center fs-1 fw-bold "style="color: #016064;">Animation Counter</div>
</p>
<p>
<div class="container">
<div class="row">
<div class="col-sm">
<p id='0101' class="fs-2 text-light">0</p>
<p class="text-light">Site visits</p>
</div>
<div class="col-sm">
<p id='0102' class="fs-2 text-light">876</p>
<p class="text-light">Members signed</p>
</div>
<div class="col-sm">
<p class="fs-2 text-light"><span id='0103'>12</span>%</p>
<p class="text-light align-content-center">Average complain rate</p>
</div>
</div>
</div>
</p>
<script>
function animate(obj, initVal, lastVal, duration) {
let startTime = null;
//get the current timestamp and assign it to the currentTime variable
let currentTime = Date.now();
//pass the current timestamp to the step function
const step = (currentTime ) => {
//if the start time is null, assign the current time to startTime
if (!startTime) {
startTime = currentTime ;
}
//calculate the value to be used in calculating the number to be displayed
const progress = Math.min((currentTime - startTime)/ duration, 1);
//calculate what to be displayed using the value gotten above
obj.innerHTML = Math.floor(progress * (lastVal - initVal) + initVal);
//checking to make sure the counter does not exceed the last value (lastVal)
if (progress < 1) {
window.requestAnimationFrame(step);
} else {
window.cancelAnimationFrame(window.requestAnimationFrame(step));
}
};
//start animating
window.requestAnimationFrame(step);
}
let text1 = document.getElementById('0101');
let text2 = document.getElementById('0102');
let text3 = document.getElementById('0103');
const load = () => {
animate(text1, 0, 511, 7000);
animate(text2, 0, 232, 7000);
animate(text3, 100, 25, 7000);
}
</script>
</body>
</html>Output
15K+ Views
