Customizable Website Counter Script with Scroll Activation

Add a dynamic, animated counter to your website using this Bootstrap-based snippet. Activate the counter on scroll for an engaging user experience.

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="fw_counter_2">
    <div class="container">
        <div class="heading">
            <h2>lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, doloribus aliquam obcaecati nostrum architecto explicabo natus neque voluptatem sunt maiores.</p>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                <div class="fws_content">
                    <div class="icon"><i class="bi bi-people"></i></div>
                    <div class="fws_digit">3000</div>
                    <div class="fws_title">Our Customers</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                <div class="fws_content">
                    <div class="icon"><i class="bi bi-cast"></i></div>
                    <div class="fws_digit">50</div>
                    <div class="fws_title">Our Project</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                <div class="fws_content">
                    <div class="icon"><i class="bi bi-person-badge"></i></div>
                    <div class="fws_digit">30</div>
                    <div class="fws_title">Our Staff</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-6">
                <div class="fws_content">
                    <div class="icon"><i class="bi bi-person-arms-up"></i></div>
                    <div class="fws_digit">300</div>
                    <div class="fws_title">Happy Client</div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

JS

function visible(partial) {
    var $t = partial,
        $w = jQuery(window),
        viewTop = $w.scrollTop(),
        viewBottom = viewTop + $w.height(),
        _top = $t.offset().top,
        _bottom = _top + $t.height(),
        compareTop = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;
    return compareBottom <= viewBottom && compareTop >= viewTop && $t.is(":visible");
}

function startCounter() {
    if ($(".fws_digit").hasClass("counter-loaded")) return;
    $(".fws_digit").addClass("counter-loaded");
    $(".fws_digit").each(function () {
        var $this = $(this);
        jQuery({ Counter: 0 }).animate(
            { Counter: $this.text() },
            {
                duration: 5000,
                easing: "swing",
                step: function () {
                    $this.text(Math.ceil(this.Counter));
                },
            }
        );
    });
}

$(document).ready(function () {
    // Check if the counter section is visible on page load
    if (visible($(".fws_digit"))) {
        startCounter();
    }

// Also start the counter on scroll if it becomes visible
    $(window).scroll(function () {
        if (visible($(".fws_digit"))) {
            startCounter();
        }
    });
});

Width:

Height:

Integrate a dynamic website counter snippet into your site with this customizable and responsive counter script. Featuring a scroll-activated, animated counter snippet, it effectively tracks website statistics such as traffic and visitors in real-time. Built with JavaScript and Bootstrap, this HTML visitor counter is easy to implement and adapts to any website layout. Perfect for displaying live stats with precision, this free web snippet offers a modern, responsive solution for tracking engagement with your website using a stylish traffic counter.

Make a Comment

Your email address will not be published. Required fields are marked *

Related Snippet

Modern Bootstrap 5 Alerts: Error, Warning, Info, and Success

Modern Bootstrap 5 Alerts: Error, Warning, Info, and Success

13-Aug-2024 Updated : 24-Aug-2024

Best Free Contact Form Template | Form Snippet

Best Free Contact Form Template | Form Snippet

13-Sep-2024 Updated : 23-Sep-2024

Responsive Bootstrap Table Snippet | Dark Mode Bootstrap Component

Responsive Bootstrap Table Snippet | Dark Mode Bootstrap Component

23-Sep-2024 Updated : 23-Sep-2024

Responsive Bootstrap 5 Header with Dropdown Menu and Icons

Responsive Bootstrap 5 Header with Dropdown Menu and Icons

31-Jul-2024 Updated : 10-Oct-2024

Snippets Categories