<!-- Other supportive js -->
<script src="js/jquery.countTo.js"></script>
<script>
$(".counter").countTo();
</script>
Using counters is very simple just add any <span class="counter" data-from="A" data-to="B" data-speed="C"></span>
A is the starting number.
B is the ending (Or final number which will show) number.
C is the speed of changing numbers while counting.
These are the counters which will start when they came into the viewport, to use them just add one more js `waypoints.min.js` which is in the js folder and js as given below
<!-- Other supportive js -->
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.countTo.js"></script>
<script>
if($.fn.waypoint){
$.each($(".counter"), function(){
$(this).waypoint(function() {
$(this).countTo();
}, {
offset : '85%',
triggerOnce: true,
});
});
}else{
$(".counter").countTo();
}
</script>
<span class="counter border txt-lg text-primary box" data-from="0" data-to="5000" data-speed="5000"></span>
<span class="counter border txt-lg text-success box" data-from="0" data-to="5000" data-speed="5000"></span>
<span class="counter border txt-lg text-danger box" data-from="0" data-to="5000" data-speed="5000"></span>
<span class="counter border txt-lg text-info box" data-from="0" data-to="5000" data-speed="5000"></span>