JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Notes: 
    1. Source: http://stackoverflow.com/questions/18339077/loop-is-more-important-than-rest/
    2. Need CSS so that mouse cursor has wait style anywhere on visible page (otherwise, body only 40px tall).
    3. From Cocco's comment: requestanimationframe executes slower than settimeout and adds the posibility to create nice animation while you execute long code and like i said when u load thousends of links the browser could getuinstable... it also could create some strange memory leaks if used wrong. requestanimationframe is made exactly for this purpose. 
-->

<button id="go">it will be legend...</button>
<div id="output"></div>

CSS

body, html {
    height:100%;
    padding:0;
    margin:0;
}

JavaScript

var W = window,
    D = W.document,
    i = 0,
    x = 0,
    output = D.getElementById('output');

function b() {
    if (x == 0) {
        output.textContent = 'wait for it...';
        x++;
    }
    i++;
    if (i < 300) {
        //if (i > 20) output.textContent = i;
        requestAnimationFrame(b);
    } else {
        D.body.style.cursor = 'default';
        output.textContent += ' dary!';
    }
}

function start() {
    console.log(D)
    D.body.style.cursor = 'wait';
    b();
}
D.getElementById('go').onclick = start;