<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<div class="row dashboard-stats">
<div class="col-md-3 col-sm-6">
<section class="panel panel-box">
<div class="panel-left panel-icon bg-success">
<i class="fa fa-dollar text-large stat-icon success-text"></i>
</div>
<div class="panel-right panel-icon bg-reverse">
<p class="size-h1 no-margin countdown_first">6791</p>
<p class="text-muted no-margin text"><span>Profit</span></p>
</div>
</section>
</div>
<div class="col-md-3 col-sm-6">
<section class="panel panel-box">
<div class="panel-left panel-icon bg-danger">
<i class="fa fa-shopping-cart text-large stat-icon danger-text"></i>
</div>
<div class="panel-right panel-icon bg-reverse">
<p class="size-h1 no-margin countdown_second">594</p>
<p class="text-muted no-margin text"><span>Sales</span></p>
</div>
</section>
</div>
<div class="col-md-3 col-sm-6">
<section class="panel panel-box">
<div class="panel-left panel-icon bg-lovender">
<i class="fa fa-rocket text-large stat-icon lovender-text"></i>
</div>
<div class="panel-right panel-icon bg-reverse">
<p class="size-h1 no-margin countdown_third">91<span class="size-h3">%</span></p>
<p class="text-muted no-margin text"><span>Growth</span></p>
</div>
</section>
</div>
<div class="col-md-3 col-sm-6">
<section class="panel panel-box">
<div class="panel-left panel-icon bg-info">
<i class="fa fa-users text-large stat-icon info-text"></i>
</div>
<div class="panel-right panel-icon bg-reverse">
<p class="size-h1 no-margin countdown_fourth">999</p>
<p class="text-muted no-margin text"><span>Users</span></p>
</div>
</section>
</div>
</div>
.panel-box {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
text-align: center;
border: medium none;
}
.panel-box .panel-icon {
display: table-cell;
padding: 29px;
width: 1%;
vertical-align: top;
border-radius: 0px;
text-align: center;
border-bottom: 1px solid #fcfcfc;
border-top: 1px solid #fcfcfc;
border-right: 1px solid #fcfcfc;
}
.dashboard-stats .stat-icon {
line-height: 65px;
}
.bg-success {
background-color: #A3C86D !important;
color: #FFF !important;
}
.success-text {
color: #82b33a;
}
.bg-danger {
background-color: #FF7857 !important;
color: #FFF !important;
}
.danger-text {
color: #d15b3d;
}
.bg-lovender {
background-color: #8075C4 !important;
color: #FFF !important;
}
.lovender-text {
color: #6a5fb1;
}
.bg-info {
background-color: #7ACBEE !important;
color: #FFF !important;
}
.info-text {
color: #3ca0cb;
}
.size-h1 {
font-size: 20px;
}
.panel-icon p.text {
font-weight: bold;
font-size: 14px;
text-align: center;
}
.panel-icon i {
text-align: center;
}
.panel-icon i {
text-align: center;
}
.text-large {
font-size: 50px;
}
.text-large {
font-size: 50px;
}
$(function() {
function countUp(count) {
var div_by = 100,
speed = Math.round(count / div_by),
$display = $('.countdown_first'),
run_count = 1,
int_speed = 24;
var int = setInterval(function () {
if (run_count < div_by) {
$display.text(speed * run_count);
run_count++;
} else if (parseInt($display.text()) < count) {
var curr_count = parseInt($display.text()) + 1;
$display.text(curr_count);
} else {
clearInterval(int);
}
}, int_speed);
}
countUp(6791);
function countUp2(count) {
var div_by = 100,
speed = Math.round(count / div_by),
$display = $('.countdown_second'),
run_count = 1,
int_speed = 24;
var int = setInterval(function () {
if (run_count < div_by) {
$display.text(speed * run_count);
run_count++;
} else if (parseInt($display.text()) < count) {
var curr_count = parseInt($display.text()) + 1;
$display.text(curr_count);
} else {
clearInterval(int);
}
}, int_speed);
}
countUp2(555);
function countUp3(count) {
var div_by = 100,
speed = Math.round(count / div_by),
$display = $('.countdown_fourth'),
run_count = 1,
int_speed = 24;
var int = setInterval(function () {
if (run_count < div_by) {
$display.text(speed * run_count);
run_count++;
} else if (parseInt($display.text()) < count) {
var curr_count = parseInt($display.text()) + 1;
$display.text(curr_count);
} else {
clearInterval(int);
}
}, int_speed);
}
countUp3(999);
});
