jQuery Counters

Use counters to showcase numbers with an increase animation

Counters

Change the numbers inside the .counter element to update the content of the counter.

500 Happy people
1560 Units Ordered
5478 Subscribers
12031 Lines of Code
<div class="row">
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-dark d-block">500</span>
        <span class="h5 text-gray">Happy people</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-dark d-block">1560</span>
        <span class="h5 text-gray">Units Ordered</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-dark d-block">5478</span>
        <span class="h5 text-gray">Subscribers</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-dark d-block">12031</span>
        <span class="h5 text-gray">Lines of Code</span>
    </div>
    <!--End of Counter-->
</div>

Icons

Examples of counters with icons:

500 Happy people
1560 Units Ordered
15 Countries
300 Events
<div class="row mb-6">
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0 text-center">
        <div class="icon icon-shape shadow-inset border-light rounded-circle mb-4">
            <span class="far fa-laugh-beam"></span>
        </div>
        <span class="counter h1 d-block">500</span>
        <span class="h5">Happy people</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0 text-center">
        <div class="icon icon-shape shadow-soft border-light rounded-circle mb-4">
            <span class="fas fa-shipping-fast"></span>
        </div>
        <span class="counter h1 d-block">1560</span>
        <span class="h5">Units Ordered</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0 text-center">
        <div class="icon icon-shape shadow-soft border border-light rounded-circle mb-4">
            <span class="fas fa-globe-europe"></span>
        </div>
        <div class="shadow-soft rounded border border-light py-4">
            <span class="counter h1 d-block">15</span>
            <span class="h5">Countries</span>
        </div>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-3 mb-3 mb-lg-0 text-center">
        <div class="icon icon-shape shadow-inset border border-light rounded-circle mb-4">
            <span class="fas fa-fire-alt"></span>
        </div>
        <div class="shadow-inset rounded border border-light py-4">
            <span class="counter h1 d-block">300</span>
            <span class="h5">Events</span>
        </div>
    </div>
    <!--End of Counter-->
</div>

Counter cards

Example of counter cards:

478 Projects
<div class="row">
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-4 mb-5 mb-lg-0 text-center">
        <div class="card bg-primary shadow-soft border-light p-4">
            <div class="card-body">
                <div class="icon icon-shape shadow-inset rounded mb-4">
                    <span class="fab fa-mailchimp"></span>
                </div>
            </div>
            <div class="card-footer shadow-inset rounded">
                <span class="counter h1 d-block">5478</span>
                <span class="h5">Subscribers</span>
            </div>
        </div>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-4 text-center">
        <div class="card bg-primary shadow-inset border-light p-4">
            <div class="card-body">
                <div class="icon icon-shape shadow-soft rounded mb-4">
                    <span class="fas fa-file-contract"></span>
                </div>
            </div>
            <div class="card-footer shadow-soft rounded">
                <span class="counter h1 d-block">478</span>
                <span class="h5">Projects</span>
            </div>
        </div>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 col-lg-4 text-center">
        <div class="card bg-primary shadow-inset border-light p-3">
            <div class="card-body shadow-soft border border-light rounded">
                <div class="icon icon-shape rounded-circle shadow-inset mb-4">
                    <span class="fas fa-file-contract"></span>
                </div>
                <span class="counter h1 d-block">478</span>
                <span class="h5">Projects</span>
            </div>
        </div>
    </div>
    <!--End of Counter-->
</div>

Javascript

Here’s an example of how to initialize the counter functionality for the .counter element:

$('.counter').counterUp({
    delay: 10,
    time: 1000,
    offset: 70,
    beginAt: 100,
    formatter: function (n) {
        return n.replace(/,/g, '.');
    }
});

Read more about jQuery CounterUp from the official plugin website.