Dynamic Website Counter Snippet for Engaging Landing Pages

Boost your website with a dynamic counter snippet using Bootstrap. Easily implement an animated, scroll-activated counter to display real-time visitor stats.

HTML

<section class="fw_counter_1">
    <div class="container">
        <div class="heading">
            <h2>lorem ipsum</h2>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="fws_content">
                    <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-12">
                <div class="fws_content">
                    <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-12">
                <div class="fws_content">
                    <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-12">
                <div class="fws_content">
                    <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");
}

$(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:

Enhance your website with a dynamic, responsive counter snippet. This free Bootstrap counter script includes a scroll-activated, animated counter to display real-time website statistics. Perfect for tracking visitors, traffic, and user engagement, this customizable HTML and JavaScript counter is designed for easy integration. Implement a stylish website counter snippet to showcase your stats with precision using this powerful, responsive counter script. Ideal for creating a seamless user experience on any site, this snippet is perfect for traffic counters, visitor statistics, and more.