<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 ----------> <div class="counter"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <div class="employees"> <p class="counter-count">30</p> <p class="employee-p">Versicherungsmakler</p> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <div class="customer"> <p class="counter-count">20</p> <p class="customer-p">Maklerverbund</p> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <div class="design"> <p class="counter-count">20</p> <p class="design-p">Maklerpool</p> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <div class="order"> <p class="counter-count">10</p> <p class="order-p">Dienstleister für MA</p> </div> </div> </div> </div> </div>

.counter { /*background-color: #eaecf0;*/ text-align: center; } .employees,.customer,.design,.order { margin-top: 70px; margin-bottom: 70px; } .counter-count { font-size: 30px; background-color: #002c59; border-radius: 50%; position: relative; color: #ffffff; text-align: center; line-height: 92px; width: 92px; height: 92px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; display: inline-block; } .employee-p,.customer-p,.order-p,.design-p { font-size: 24px; color: #000000; line-height: 34px; }

$('.counter-count').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 5000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); });