Animated Website Counter Snippet for Impressive User Stats

Enhance your website's engagement with an animated counter snippet. This dynamic Bootstrap counter activates on scroll to display real-time stats.

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_4 {
    padding: 50px 0;
}
.fw_counter_4 .heading {
    text-align: center;
}
.fw_counter_4 .heading h2 {
    text-transform: capitalize;
    margin-bottom: 50px;
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: 700;
}
.fw_counter_4 .fws_content {
    text-align: center;
    background: #f5f5f5;
    padding: 40px 0;
}
.fw_counter_4 .fws_digit {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 5px;
}
.fw_counter_4 .fws_title {
    opacity: 0.8;
}
.fw_counter_4 .icon {
    flex: 0 0 55px;
}
.fw_counter_4 .icon i {
    font-size: 30px;
    color: #198754;
}
.fw_counter_4 .fws_content_text span {
    text-transform: capitalize;
    color: #555;
    display: inline-block;
}
.fw_counter_4 .fws_content_text h2 {
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 10px;
    font-size: 34px;
}
@media (max-width: 767.9px) {
    .fw_counter_4 .heading p {
        max-width: 100%;
    }
    .fw_counter_4 .fws_content_text {
        margin-bottom: 30px;
    }
}
@media (max-width: 576px) {
    .fw_counter_4 .fws_content {
        margin-bottom: 30px;
    }
}
@media (max-width: 365px) {
    .fw_counter_4 .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:

Boost your website's engagement with a feature-rich website counter snippet. This responsive and dynamic counter script, built with JavaScript and Bootstrap, offers an animated, scroll-activated counter that tracks website statistics in real-time. Whether you need a custom website counter to monitor visitor traffic or showcase achievements, this free HTML visitor counter provides flexibility and accuracy. Ideal for modern web designs, it integrates seamlessly, delivering a traffic counter that's easy to implement and visually appealing. Perfect for developers seeking a Bootstrap counter snippet or a responsive, animated counter solution.