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

12031 Lines of Code

<div class="row">
    <!--Counter-->
    <div class="col-12 col-sm-6 mb-3 col-lg-3 mb-5 mb-lg-0">
        <div class="icon icon-shape icon-shape-primary rounded-circle mr-2 mr-md-0 mb-2">
            <i class="far fa-grin-hearts"></i>
        </div>
        <span class="counter display-3 text-primary d-block">500</span>
        <span class="h5 text-gray">Happy people</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 mb-3 col-lg-3 mb-5 mb-lg-0">
        <div class="icon icon-shape icon-shape-secondary mr-2 mr-md-0 mb-2">
            <i class="fas fa-box-open"></i>
        </div>
        <span class="counter display-3 text-secondary d-block">1560</span>
        <span class="h5 text-gray">Units Ordered</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-12 col-sm-6 mb-3 col-lg-3">
        <div class="icon icon-primary mr-2 mr-md-0 mb-4">
            <i class="fas fa-brain"></i>
        </div>
        <span class="counter display-3 text-primary d-block">12031</span>
        <span class="h5 text-gray">Lines of Code</span>
    </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.