Easy-to-Use Website Counter Script for Tracking Visitors

Implement a stylish and functional website counter using this Bootstrap snippet. The dynamic, scroll-activated, and animated counter ensures a smooth user experience.

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
body {
    font-family: "Nunito", sans-serif;
}
.fw_counter_3 {
    text-align: center;
    padding: 50px 0;
    background-color: #f5f5f5;
}
.fw_counter_3 .heading h2 {
    text-transform: capitalize;
    margin-bottom: 10px;
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: 700;
}
.fw_counter_3 .heading p {
    opacity: 0.8;
    max-width: 70%;
    margin: 0 auto 30px;
}
.fw_counter_3 .fws_content {
    padding: 20px;
    display: flex;
    align-items: center;
    text-align: left;
    background-color: #fff;
}
.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 70px;
}
.fw_counter_3 .icon i {
    font-size: 20px;
    color: teal;
    width: 50px;
    height: 50px;
    display: list-item;
    background: rgba(0, 128, 128, 0.1);
    text-align: center;
    border-radius: 50%;
    line-height: 50px;
    list-style: none;
}
@media (max-width: 991px) {
    .fw_counter_3 .fws_content {
        margin-bottom: 30px;
    }
}
@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");
}

$(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 highly customizable website counter snippet that tracks real-time statistics. This dynamic counter and scroll-activated counter features animated digits that engage users as they scroll. Built with JavaScript and Bootstrap, it’s a responsive counter script that fits perfectly into any modern web design. Use this custom website counter to monitor your website’s traffic or showcase achievements like customer counts, project completions, and more. This traffic counter and HTML visitor counter is easy to integrate and free to use, making it an ideal choice for developers seeking free web snippets.