JavaScript Counter Up Animation

When we visit a website, we see some animated number counter in the middle, or top, or bottom of the website. These animated number widgets that increase progressively are called counter up widgets. This is usually a visual effect of numbers where three or four numbers are incrementally increased to reach a target value. Today, in this blog post, we will share a snippet about Counter Up which was built using Bootstrap and JavaScript. We have not used any external plugins in this snippet. The video tutorial below shows how to create this snippet from start to finish. Watch the full video before collecting the source code. If you like our video tutorial please subscribe to our channel.

Video Tutorial:

We hope you watched the video tutorial about JavaScript Counter Up Animation. Counter Up widgets are used on a website to display a company's statistics. Some of these statistics are how many customers the company has served, how many awards it has received, how many products have been sold, how many projects have been completed, etc. After using this widget, your website will become very dynamic, and the user's attention will increase. You can use this widget on your website homepage to show your company's key metrics or achievements. You can use it on the service page to show the client numbers and complete the project numbers. You can use the widget to display the number of products and the number of happy customers on the product page. Finally, it can be used to showcase company milestones and years of experience on the About Us page.

The snippet has four divs that show Location, Award, Project, and Client count. Divs are taken using the Bootstrap 5 grid to use less CSS. Font awesome icons are used above each number counter. How and from where Bootstrap and Font Awesome CDN are added and implemented in this project can be understood by watching the video above.

You May Also Like:

JavaScript Counter Up Animation [ Source Code ]:

To create this Bootstrap 5 counter-up animation with JavaScript snippet, first create the CSS and HTML files and paste the following codes into your files. You can use a separate JS file to keep the js code we used here. In this project, we have put the JS code underneath the HTML. If you face any problems, after testing the snippet in your browser, you can download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->    
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Counter Up Animation with Javascript</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    
    <div class="counter text-center">
        
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="single-number">
                            <div class="icon-area">
                                <i class="fa fa-home"></i>
                            </div>
                            <span class="digit-box" data-val="120">000</span>
                            <span class="text-box">Different Locations</span>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="single-number">
                            <div class="icon-area">
                                <i class="fa fa-trophy"></i>
                            </div>
                            <span class="digit-box" data-val="090">000</span>
                            <span class="text-box">Awards Won</span>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="single-number">
                            <div class="icon-area">
                                <i class="fa fa-file-o"></i>
                            </div>
                            <span class="digit-box" data-val="055">000</span>
                            <span class="text-box">Projects Done</span>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="single-number">
                            <div class="icon-area">
                                <i class="fa fa-users"></i>
                            </div>
                            <span class="digit-box" data-val="125">000</span>
                            <span class="text-box">Happy Clients</span>
                        </div>
                    </div>
                </div>
            </div>
        
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        let targetElements = document.querySelectorAll(".digit-box");
        let animationtiming = 3000;

        targetElements.forEach((targetElement) => {
        let valueOne = 0;
        let valueTwo = parseInt(targetElement.getAttribute("data-val"));
        let timing = Math.floor(animationtiming / valueTwo);
        let counter = setInterval(function () {
            valueOne += 1;
            targetElement.textContent = valueOne;
            if (valueOne == valueTwo) {
            clearInterval(counter);
            }
        }, timing);
        });

        </script>
</body>
</html>

ADD CSS:

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}
body {
	background: #2e363e;
}
.counter {
	padding: 12% 0;
}
.single-number {
	padding: 35px;
	transition: all 0.6s;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.icon-area {
	width: 80px;
	height: 80px;
	margin: 15px auto;
	background: #2e363e;
	border-radius: 15px;
	line-height: 90px;
	border: 2px solid #2fdb50;
}
.icon-area i {
	color: #fff;
	font-size: 40px;
}
.digit-box {
	display: block;
	font-size: 80px;
	font-weight: 700;
	color: #2fdb50;
}
.text-box {
	color: #fff;
}
.single-number:hover {
	background: #2fdb50;
	color: #fff;
}
.single-number:hover .digit-box {
	color: #fff;
}
@media (max-width: 1000px) {
	.single-number {
		margin-bottom: 30px;
	}
	.digit-box {
		font-size: 50px;
	}
}

We hope this snippet is working for you. Counter Up Widget is a must if you want to present your company data to users dynamically and impressively. This way you can highlight your company's key information to your clients and make it more memorable for users. Click the Load More button on our homepage to get more such snippets. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

JavaScript Counter Up Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

JavaScript Counter Up Animation

Video Tutorial:

JavaScript Counter Up Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form