JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<span count-to="100"></span>
<span count-to="100000"></span>

JavaScript

(function() {
    
    var cache = [];
    var counts = document.querySelectorAll("[count-to]");
    
    Array.prototype.forEach.call(counts, function(count) {
        var to = +count.getAttribute("count-to");
        cache.push({
            el: count,
            to: to,
            speed: 1000 / to,
            step: to / Math.log(to) / 100,
            current: 0
        });
    });
    
    cache.forEach(function(c) {
        var int = setInterval(function() {
            c.current += c.step;
            if (c.current >= c.to) {
                clearInterval(int);
                c.el.innerText = c.to;
                return;
            }
            c.el.innerText = c.current.toFixed(0);
        }, c.speed);
    });
    
})();