# 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.