"Admin Panel Count"
Bootstrap 3.3.0 Snippet by franco77

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: