Responsive Website Visitor Counter for Real-Time Stats

Create a responsive and scroll-activated counter for your website with this Bootstrap snippet. Track visitor stats dynamically with an animated display.

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_3">
    <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="count">
                        <div class="fws_digit">3000</div>
                        <div class="fws_title">Our Customers</div>
                    </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="count">
                        <div class="fws_digit">50</div>
                        <div class="fws_title">Our Project</div>
                    </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="count">
                        <div class="fws_digit">30</div>
                        <div class="fws_title">Our Staff</div>
                    </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="count">
                        <div class="fws_digit">300</div>
                        <div class="fws_title">Happy Client</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
body {
    font-family: "Roboto", sans-serif;
}
.fw_counter_3 {
    text-align: center;
    padding: 50px 0;
    background-color: #fafafa;
}
.fw_counter_3 .heading h2 {
    text-transform: capitalize;
    margin-bottom: 10px;
    font-size: 30px;
    letter-spacing: 1px;
}
.fw_counter_3 .heading p {
    opacity: 0.8;
    max-width: 70%;
    margin: 0 auto 20px;
}
.fw_counter_3 .fws_content {
    padding: 20px 0;
    display: flex;
    align-items: center;
    text-align: left;
}
.fw_counter_3 .fws_digit {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 5px;
}
.fw_counter_3 .fws_title {
    opacity: 0.8;
}
.fw_counter_3 .icon {
    flex: 0 0 55px;
}
.fw_counter_3 .icon i {
    font-size: 30px;
    color: teal;
}
@media (max-width: 767.9px) {
    .fw_counter_3 .heading p {
        max-width: 100%;
    }
}
@media (max-width: 365px) {
    .fw_counter_3 .col-6 {
        width: 100%;
    }
}

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:

Enhance your website with a customizable and responsive website counter snippet. This dynamic counter, powered by a scroll-activated and animated counter script, tracks key website statistics such as visitor traffic with ease. Built using JavaScript and Bootstrap, this free HTML visitor counter integrates seamlessly into any website, providing real-time traffic data. Ideal for web developers, this responsive counter script is perfect for creating a custom website counter, from simple counters to advanced traffic monitoring tools.

Make a Comment

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

Related Snippet

Modern Footer Design with Social Icons and Payment Options

Modern Footer Design with Social Icons and Payment Options

08-Aug-2024 Updated : 24-Aug-2024

Responsive Bootstrap Table Snippet | Bootstrap Component for Table Section

Responsive Bootstrap Table Snippet | Bootstrap Component for Table Section

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

Responsive Login and Register Page with Bootstrap Components

Responsive Login and Register Page with Bootstrap Components

04-Dec-2024 Updated : 04-Dec-2024

Responsive Icon Box Snippet with Bootstrap

Responsive Icon Box Snippet with Bootstrap

17-Sep-2024 Updated : 17-Sep-2024

Snippets Categories