JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="d"></div>

CSS

#d {
    background: #07a;
    height: 20px;
    position: absolute;
    width: 20px;
}

JavaScript

(function () {
    window.requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
    
    if (window.requestAnimationFrame) {
        window.onEachFrame = function (callback) {
            var _cb = function () {
                console.log('called');
                callback();
                webkitRequestAnimationFrame(_cb);
            }
            _cb();
        };
    } else {
        window.onEachFrame = function (callback) {
            window.setInterval(callback, 1000 / 60);
        }
    }
}());


var loop = 0;


function step() {
    if (loop >= 200) {
        return;
    }
    var d = document.getElementById('d');
    d.style.width = loop + "px";
    loop++;
}
window.onEachFrame(step);