JSFiddle - React, Tailwind, and code Playground
HTML
<div class='number_container'>
<span class='count'>317249</span>
</div>
CSS
.number_container {
background: red;
width: 100px;
text-align: center;
padding: 38px 0;
border-radius: 50px;
color: white;
margin: 0 auto;
}
.count {
font: 20px arial;
}
JavaScript
$(document).ready(function() {
$('.count').each(function() {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3500,
easing: 'swing',
step: function(now) {
$(this).text(commaSeparateNumber(Math.ceil(now)));
}
});
});
function commaSeparateNumber(val)
{
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return val;
}
});