Number Counter

by nazmoonnoor

HTML

<h3>Number Counter</h3>

<div class="wrapper">
    <div class="counter col_fourth">
      <i class="fa fa-code fa-2x"></i>
      <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
       <p class="count-text ">Counter 1</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-coffee fa-2x"></i>
      <h2 class="timer count-title" id="count-number" data-to="17870" data-speed="1500"></h2>
      <p class="count-text ">Counter 2</p>
    </div>
</div>

CSS

body {
  font-family: Arial;
  padding: 25px;
  color: #808080;
  text-align: center;	
}
.col_fourth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

JavaScript

var from= 0,               
    to= 0,                 
    speed= 1000,          
    refreshInterval= 100;    

$('.counter').each(function(){
    timer = $(this).find('.timer');
    to = $(timer).data('to');
    alert(to);
});