Here’s a tutorial to guide you through creating a dynamic Bootstrap 5 Number Counter Animation, perfect for showcasing statistics and engaging your audience. Follow the steps below to implement this engaging feature on your website.
Step 1: Include Header Assets
First, you’ll need to include the necessary CSS assets in the <head> section of your HTML document. This will ensure that the styles are applied correctly.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'>
Step 2: Create the HTML Structure
Next, create the HTML structure for the number counters. Each counter will be contained within an <article> element, including an icon, the counter itself, and a descriptive label.
<article class="counter-container">
<i class="fab fa-instagram fa-3x"></i>
<div class="counter" data-target="12000"></div>
<span>Instagram Followers</span>
</article>
<article class="counter-container">
<i class="fab fa-youtube fa-3x"></i>
<div class="counter" data-target="5000"></div>
<span>YouTube Subscribers</span>
</article>
<article class="counter-container">
<i class="fab fa-facebook fa-3x"></i>
<div class="counter" data-target="7500"></div>
<span>Facebook Fans</span>
</article>
Step 3: Apply CSS Styling
Now, let’s add the CSS styles to make our counters visually appealing and responsive.
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #8e44ad;
color: #fff;
font-family: "Roboto Mono", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.counter-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 30px 50px;
}
.counter {
font-size: 60px;
margin-top: 10px;
min-width: 5ch;
}
@media (max-width: 580px) {
body {
flex-direction: column;
}
}
Step 4: Implement the JavaScript Logic
Finally, we’ll add the JavaScript code to animate the number counters, bringing them to life when the page loads.
const counters = document.querySelectorAll(".counter");
counters.forEach((counter) => {
counter.innerText = "0";
const updateCounter = () => {
const target = +counter.getAttribute("data-target");
const count = +counter.innerText;
const increment = target / 200;
if (count < target) {
counter.innerText = `${Math.ceil(count + increment)}`;
setTimeout(updateCounter, 1);
} else counter.innerText = target;
};
updateCounter();
});
That concludes the tutorial! You have successfully created a Bootstrap 5 Number Counter Animation. This engaging element can enhance your website’s presentation of key statistics and data.
