JSFiddle - React, Tailwind, and code Playground
HTML
<div class="lg-number">8,999,999,999,999,999</div>
JavaScript
var counterElement = $(".lg-number");
var counterTotal = parseInt(counterElement.text().replace(/,/g, ""));
var duration = 1000;
var animationInterval = 20;
var startTime = Date.now();
counterElement.text(0);
var numberIncrementer = setInterval(function(){
var elapsed = Date.now() - startTime;
var currentCounterNumber = Math.ceil(elapsed / duration * counterTotal);
if (currentCounterNumber < counterTotal){
counterElement.text(addCommas(currentCounterNumber));
} else {
counterElement.text(addCommas(counterTotal));
clearInterval(numberIncrementer);
}
}, animationInterval);
function addCommas(number){
while (/(\d+)(\d{3})/.test(number.toString())){
number = number.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return number;
}