<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> <div class="col-md-2 counter "> <i class="fa fa-facebook-official" aria-hidden="true"></i> <h2 class="counter-value" data-count="104"></h2> <p class="count-text ">Offered Services</p> </div> <div class="col-md-2 counter "> <i class="fa fa-facebook-official" aria-hidden="true"></i> <h2 class="counter-value" data-count="47184"></h2> <p class="count-text ">Tickets Solved</p> </div> </div></div> </div> </div>

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

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