<div class="counter" data-count="150">0</div>
<div class="counter" data-count="85">0</div>
<div class="counter" data-count="2200">0</div>
<style>
body {
background-color: #F46A6A;
color:#fff;
max-width:800px;
margin: 100px auto 0;
text-align: center;
display: table;
}
.counter {
display: table-cell;
margin:1.5%;
font-size:50px;
background-color: #FF6F6F;
width:200px;
border-radius: 50%;
height:200px;
vertical-align: middle;
}
</style>
<script>
$('.counter').each(function() {
let $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 8000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
</script>