""bootstrap 3 number counter ""
Bootstrap 3.3.0 Snippet by kamranansari786

Post to Facebook Tweet this

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Oxygen" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">
<div class="counter_bg container-fluid text-center">
<div class="container">
<div class="row" id="counter">
<div class="wrapper">
<div class="col-md-2 counter ">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<h2 class="counter-value" data-count="376">0</h2>
<p class="count-text ">Projects Customized</p></div>
<div class="col-md-2 counter">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<h2 class="counter-value" data-count="12">0</h2>
<p class="count-text ">Team Members</p>
</div>
<div class="col-md-4 counter_border counter ">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<h2 class="counter-value" data-count="4543" data-speed="1500"></h2>
<p class="count-text ">Stisfied Clients</p>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
.counter_bg{ background-image:linear-gradient(160deg,#0031bc,#00217e);}
.wrapper{height:475px;}
.wrapper i{font-size:34px;color: #e1e4e8; }
.counter { padding: 20px 0; border-radius: 5px;margin-top: 130px;margin-left: 7px;}
.count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { text-align: center; }
.wrapper h2{color: #fff;font-size: 40px;font-family: 'Mukta', sans-serif;font-weight: bold;}
.wrapper p{color: #e3e5e8;padding-top:10px; }
.counter_border h2{ font-size: 70px !important; margin-top: 12px; }
.counter_border{background-color:#012fb2; border-radius:50%;width: 335px;margin-top: 77px !important; }
.counter_border i{ padding: 35px !important; }
.counter_border p{ padding-top: 10px !important;padding-bottom: 40px !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
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 7000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
a = 1;
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit React
Login Class="Gabriel"
Bootstrap 4 counter
plus minus counter input

Questions / Comments: