Counters

Counters

Counters

To use counters you must add the jquery.countTo.js to your webpage which is in the js folder as and the script as given below

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

Advance Counters

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>