Bootstrap 5 Number Counter Animation

Bootstrap 5 Number Counter Animation
Code Snippet:Animated Number - Counter Widget
Author: Solygambas
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 6,703
License: MIT
Edit Code online: View on CodePen
Read More

This code is for a Bootstrap 5 Number Counter Animation. It animates numbers on a webpage. It works by incrementing numbers to a specified target. It’s helpful for displaying dynamic counts like followers or subscribers or any numbers to showcase statistics.

Furthermore, you can use this code on your website to create engaging number-count animations. It adds interactivity, making your content more captivating. This can help highlight important statistics or metrics, enhancing user engagement and understanding.

How to Create Bootstrap 5 Number Counter Animation

1. First, create an HTML file for your webpage and include the necessary Bootstrap and Font Awesome CDN links in the <head> section of your HTML file. These links provide the required styles and icons for the counter animation.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

2. In your HTML file, set up the counter elements. Each counter should be contained within a <div> element with the class “counter-container.” Inside each container, place an icon from Font Awesome (e.g., <i class="fab fa-instagram fa-3x"></i>), a <div> element with the class “counter,” and a <span> to describe what the counter represents.

<div class="counter-container">
      <i class="fab fa-instagram fa-3x"></i>
      <div class="counter" data-target="12000"></div>
      <span>Instagram Followers</span>
    </div>
    <div class="counter-container">
      <i class="fab fa-youtube fa-3x"></i>
      <div class="counter" data-target="5000"></div>
      <span>YouTube Subscribers</span>
    </div>
    <div class="counter-container">
      <i class="fab fa-facebook fa-3x"></i>
      <div class="counter" data-target="7500"></div>
      <span>Facebook Fans</span>
    </div>

3. Now, add the following CSS code to your webpage. This code ensures that the counters are visually appealing and responsive. It includes styles for the counter containers, counters themselves, and media queries for mobile responsiveness.

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

* {
  box-sizing: border-box;
}

.counter-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 30px 50px;
}

.counter {
  font-size: 60px;
  margin-top: 10px;
}

@media (max-width: 580px) {
  body {
    flex-direction: column;
  }
}

4. Finally, include the JavaScript code at the end of your HTML file, just before the closing </body> tag. This code initializes the counters and animates the numbers.

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’s it! You’ve successfully added a stylish number counter animation to your website using Bootstrap 5 and Font Awesome. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X