How to make counter section one by one in Bootstrap 5 ?
Counter-sections are often used on websites to highlight important statistics or achievements. They are effective in capturing the attention of visitors and conveying information in a visually pleasing manner. Bootstrap 5 provides classes and components that make it easy to create these sections.
Configuring the Bootstrap 5
Before we dive into creating counter sections, make sure you have Bootstrap 5 integrated into your project. You can do this by including Bootstrap’s CSS and JavaScript files in your HTML document. You can either download Bootstrap locally or use a Content Delivery Network (CDN) for quicker integration.
Approach
- Creating the basic structure of the Counter Section:
- Various HTML tags are employed to establish the foundational structure of the project.
- <div>: Used for grouping and structuring content.
- <h1>, <h2>, <h3>, etc: Headings for different sections or titles.
- <p>: For paragraphs and text content.
- Styling the Counter Section:
- Bootstrap provides a range of classes for styling counter sections.
- Utilize classes like bg-primary, text-light, rounded, and p-3 to customize the background color, text color, and padding of the counter cards.
- Experiment with these classes to achieve the desired visual appearance for your website.
- Adding functionality to the Counter Section using JavaScript:
- Select Counters: Use document.querySelectorAll(‘.counter’) to select all elements with the class “counter.”
- Get Target Values: Extract the target value from the “data-target” attribute for each counter using parseInt(counter.getAttribute(‘data-target’)).
- Set Duration and Speed: Define animation duration and calculate a “step” value to control animation speed.
- Initialize Variables: Initialize the current variable to 0.
- Update Counter: Create updateCounter to increment the current value, update the counter’s text, and request the next animation frame.
- Delay Counters: Use setTimeout with a delay of index * 1000 to ensure sequential counting.
- Start Animation: Call animateCounters() on page load.
Example: This example illustrates the creation of a basic counter section using Bootstrap 5.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < title > Sequential Counters Example </ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" /> < style > /* Custom CSS */ body { height: 97vh; background-color: #e6df90; } </ style > </ head > < body > < div class = "h1 text-success text-center mt-3" > w3wiki < p class="h4 mt-5 text-muted text-start text-center"> w3wiki is a leading platform that provides computer science resources and coding challenges for programmers. </ p > </ div > < div class = "container mt-5" > < div class="row justify-content-center"> < div class = "col-md-4" > < div class="card text-center bg-info text-dark rounded p-3"> < div class = "card-body" > < h3 class = "card-text counter" data-target = "95" > 0 </ h3 > < p class="card-title fs-5 text-white"> No. of Courses we provided </ p > </ div > </ div > </ div > < div class = "col-md-4" > < div class="card text-center bg-info text-dark rounded p-3"> < div class = "card-body" > < h3 class = "card-text counter" data-target = "150000" > 0 </ h3 > < p class="card-title fs-5 text-white"> Enrolled Students </ p > </ div > </ div > </ div > < div class = "col-md-4" > < div class="card text-center bg-info text-dark rounded p-3"> < div class = "card-body" > < h3 class = "card-text counter" data-target = "1000000" > 0 </ h3 > < p class="card-title fs-5 text-white"> Registered Students </ p > </ div > </ div > </ div > </ div > </ div > < script src = "./script.js" ></ script > </ body > </ html > |
Javascript
/* JavaScript to animate the counters sequentially*/ function animateCounters() { const counters = document .querySelectorAll( ".counter" ); counters .forEach((counter, index) => { const target = parseInt(counter .getAttribute( "data-target" ) ); const duration = 1000; const step = Math.ceil( (target / duration) * 15 ); let current = 0; const updateCounter = () => { current += step; if (current <= target) { counter .innerText = current; requestAnimationFrame(updateCounter); } else { counter.innerText = target; } }; setTimeout(() => { updateCounter(); }, index * 1000); // Delay each counter by 1 second }); } animateCounters(); |
Output:
Contact Us