JSFiddle - React, Tailwind, and code Playground
CSS
.block {
display: inline-block;
width:35px; height:20px;
margin:2px;
border:2px solid #333;
}
.block.active { background-color: #f00 }
JavaScript
// variables for time-dependant state
var bootTime;
var timeElapsed = function() { return new Date() - bootTime }
var ms_per_block = 80;
var currentBlock = function() {
return Math.floor(timeElapsed() / ms_per_block);
}
//the actual update method
function refresh_ui() {
var index = currentBlock();
$('#block_' + index).addClass('active');
}
function be_busy() {
var now = new Date();
while(new Date - now > 100) { }
}
jQuery(function() {
var blocks = jQuery('<section/>').addClass('blocks');
for(var i = 0, max = 400; i < max; i++) {
var node = jQuery('<div/>').addClass('block')
node.attr('id','block_' + i);
blocks.append(node);
}
$('body').append(blocks);
bootTime = new Date();
setInterval(refresh_ui,50);
setInterval(be_busy,120);
});