"Admin Panel Count"
Bootstrap 3.3.0 Snippet by Mehedi-BN

<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); });

Related: See More


Questions / Comments: