You may know that interactive components improve the user experience of a web application. One such element is an “Animated Counter” that can be used to show statistics on the website. It is also utilized to display the number of visitors, how many members have signed up, or how many people played an online game. The same functionality can be achieved using static numbers; however, animated counters assist in giving your website a more professional and expressive appearance.
This post will discuss the procedure of creating an animated counter in JavaScript. So, let’s start!
How to create an animated counter in JavaScript
We will now create an animated counter for displaying the number count from “0” to “1000”. To do the same, follow the below-given step-by-step instructions:
Step 1: Add HTML elements
First of all, we will create an HTML file named “myFile.html” and specify the title of our application as “Animated counter” in the “” tag. We will also link our JavaScript file “testfile.js” and CSS file “myStyle.css” with “MyFile.html” in the following way:
<head>
<script src=“testfile.js”></script>
<link rel=“stylesheet” href=“myStyle.css”>
<title>Animated counter</title>
</head>
In the next step, we will add a heading using the “
” tag and a container with the “
” tag. The “id” of the “
” tag will be set to “counter”:
<body>
<h1>Let the Counter Begin!</h1>
<div id=“counter”>
</div>
</body>
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-1.png" data-lazy- height="388" src="data:image/svg xml,” width=”814″>
Step 2: JavaScript code
Now move to your JavaScript file and utilize the “setInterval()” method for running the “updated” function:
let counts=setInterval(updated);
Then, create an “upto” variable that represents the limit of the counter. As a starting point, the value of the “upto” variable is initialized to “0”:
In the “updated()” function, we will first use the “getElementById()” method to fetch the HTML element with the “counter” id in the “count” variable. After that, we will utilize the “innerHTML” property of the “count” variable to display the count as its inner text. When the “count” value will reach “1000”, the “clearInterval()” method will stop the execution of the program:
function updated(){
var count= document.getElementById(“counter”);
count.innerHTML= upto;
if(upto===1000)
{
clearInterval(counts);
}
}
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-2.png" data-lazy- height="390" src="data:image/svg xml,” width=”852″>
Step 3: Style HTML elements
To enhance the appearance of our animated counter application, we will style the added HTML elements. For this purpose, firstly, we will align the text present inside the “body” to the “center” and also add a “background-image”:
body {
text–align: center;
background–image: url(‘counter.jpg’);
}
Then, we will set the “color” and “font-family” properties of the added heading:
h1 {
color: rgb(0, 0, 2);
font–family:‘Courier New’, Courier, monospace;
}
Lastly, we will change the color of the “counter” container and specify the desired values for the “font-family”, “font-size” and “font-style” properties:
div {
color: rgb(37, 25, 5);
font–family:courier;
font–size: 200%;
font–style:normal;
}
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-3.png" data-lazy- height="459" src="data:image/svg xml,” width=”741″>
Step 4: Run Animated Counter Application
After saving the specified code, open up the HTML file of your Animated Counter Project in the browser with the help of the “Live Server” extension:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-4.png" data-lazy- height="542" src="data:image/svg xml,” width=”725″>
Here is how our animated counter JavaScript application looks like:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-5.png" data-lazy- height="671" src="data:image/svg xml,” width=”879″>
Conclusion
An animated counter is created in a JavaScript application to display the number counter in an animated form starting from 0 and ending with the specified number. Many websites employ this feature to make their web page more attractive. You can utilize an animated counter to show the number of registered users, the number of website visitors, or the number of people who played an online game. This post discussed the procedure of creating an animated counter in JavaScript.
<body>
<h1>Let the Counter Begin!</h1>
<div id=“counter”>
</div>
</body>
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-1.png" data-lazy- height="388" src="data:image/svg xml,” width=”814″>
Step 2: JavaScript code
Now move to your JavaScript file and utilize the “setInterval()” method for running the “updated” function:
let counts=setInterval(updated);
Then, create an “upto” variable that represents the limit of the counter. As a starting point, the value of the “upto” variable is initialized to “0”:
In the “updated()” function, we will first use the “getElementById()” method to fetch the HTML element with the “counter” id in the “count” variable. After that, we will utilize the “innerHTML” property of the “count” variable to display the count as its inner text. When the “count” value will reach “1000”, the “clearInterval()” method will stop the execution of the program:
function updated(){
var count= document.getElementById(“counter”);
count.innerHTML= upto;
if(upto===1000)
{
clearInterval(counts);
}
}
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-2.png" data-lazy- height="390" src="data:image/svg xml,” width=”852″>
Step 3: Style HTML elements
To enhance the appearance of our animated counter application, we will style the added HTML elements. For this purpose, firstly, we will align the text present inside the “body” to the “center” and also add a “background-image”:
body {
text–align: center;
background–image: url(‘counter.jpg’);
}
Then, we will set the “color” and “font-family” properties of the added heading:
h1 {
color: rgb(0, 0, 2);
font–family:‘Courier New’, Courier, monospace;
}
Lastly, we will change the color of the “counter” container and specify the desired values for the “font-family”, “font-size” and “font-style” properties:
div {
color: rgb(37, 25, 5);
font–family:courier;
font–size: 200%;
font–style:normal;
}
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-3.png" data-lazy- height="459" src="data:image/svg xml,” width=”741″>
Step 4: Run Animated Counter Application
After saving the specified code, open up the HTML file of your Animated Counter Project in the browser with the help of the “Live Server” extension:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-4.png" data-lazy- height="542" src="data:image/svg xml,” width=”725″>
Here is how our animated counter JavaScript application looks like:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-create-an-animated-counter-in-JavaScript-5.png" data-lazy- height="671" src="data:image/svg xml,” width=”879″>
Conclusion
An animated counter is created in a JavaScript application to display the number counter in an animated form starting from 0 and ending with the specified number. Many websites employ this feature to make their web page more attractive. You can utilize an animated counter to show the number of registered users, the number of website visitors, or the number of people who played an online game. This post discussed the procedure of creating an animated counter in JavaScript.
About the author
<img alt="" data-lazy-src="https://secure.gravatar.com/avatar/c73b74cd8044d2e9b300610f5af77d0b?s=112&r=g" data-lazy- height="112" src="data:image/svg xml,” width=”112″>
Sharqa Hameed
I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.
