JSFiddle - React, Tailwind, and code Playground

HTML

<div id="status">Status: idle</div>
<ul>
    <li id="start">Start massive calculation</li>
    <li id="testclick">Click here</li>
</ul>
<div id="testObjects">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

CSS

#testObjects {position: absolute; top: 70px; width: 400px; height: 400px; border: solid 1px blue}

JavaScript

function E(i) {
    return document.getElementById(i);
}
E('start').onclick = function() {
    var r = 0, lis = E('testObjects').children, d, x, y;
    E('status').innerHTML = "Status: started";
    for (var i = 0; i < 1000; i++) {
        for (var j = 0; j < lis.length; j++) {
            lis[j].style.position = 'absolute';
            d = Math.random() * 2 * Math.PI;
            x = lis[j].offsetLeft;
            y = lis[j].offsetTop;
            console.log(lis[j], x, y);
            x+= Math.cos(d) * 10;
            y+= Math.sin(d) * 10;
            console.log('->', x, y)
            if (x > 0 && x < 400 && y > 0 && y < 400) {
                lis[j].style.top = y + 'px';
                lis[j].style.left = x + 'px';
            }
        }
                
    }
    E('status').innerHTML = 'Status: done';
}