<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <section class="project-counter-wrap"> <div class="container"> <div class="project-counter"> <div class="project-counter-item"> <div class="project-count"><span class="project-count-js" data-count="400">0</span><span>k+</span></div> <p>Active User</p> </div> <div class="project-counter-item"> <div class="project-count"><span class="project-count-js" data-count="300">0</span><span>k+</span></div> <p>Active User</p> </div> <div class="project-counter-item"> <div class="project-count"><span class="project-count-js" data-count="200">0</span><span>k+</span></div> <p>Active User</p> </div> <div class="project-counter-item"> <div class="project-count"><span class="project-count-js" data-count="350">0</span><span>k+</span></div> <p>Active User</p> </div> </div> </div> </section>

/* counter */ .project-counter { display: flex; justify-content: space-around; align-items: center; } .project-counter-item { text-align: center; padding: 0px 15px; width: 25%; } .project-count { font-size: 40px; color: #0071dc; font-weight: bold; line-height: 1; margin-bottom: 10px; } .project-counter-item p { color: #0071dc; font-size: 15px; line-height: 1; }

//counter js $('.project-count-js').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 7000, easing: 'linear', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); } }); });