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