JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div id="f">
    <div id="d1"></div><span id="t"></span><span id="c"></span>
</div>

CSS

body {
    background: #000;
    word-wrap:break-word;
}
#e {
    display:none;
}
#f {
    width:320px;
    height:40px;
    background:#111;
    border: 3px solid #D5D1CF;
    border-top: 25px solid #D5D1CF;
    color: green;
    font-weight: 900;
    font-family:'Courier new';
    font-size: 12px;
    margin: 50px;
    display: none;
    padding: 5px;
    overflow: auto;
}
#t {
    border: 0px solid #fff;
}
#c {
    background: green;
    color: #fff;
    border: 0px solid #fff;
}

JavaScript

document.getElementById('d1').innerHTML = 'Bitte warten ...';
var t = document.getElementsByTagName('body')[0],
    f = document.getElementById('f'),
    p = document.getElementById('t'),
    s = document.getElementById('c'),
    x = '▮',
    timer;
t.style.backgroundColor = '#000';
t.style.width = window.innerWidth + 'px';
t.style.height = window.innerHeight + 'px';
f.style.cursor = 'wait';
f.style.display = 'block';

function isInt(n) {
    return typeof n == "number" && isFinite(n) && n % 1 === 0;
}

(function setCursor(c, zz) {
    c = c || '\/';
    var zz = zz || 1;

    if (isInt(zz / 2) === true) {
        s.innerText ? (p.innerText = p.innerText + '▮') : (p.textContent = p.textContent + '▮');
    } else {
        s.innerText ? (s.innerText = c) : (s.textContent = c);
    }
    var _c = (c == '\/') ? '\\' : '\/';
    clearTimeout(timer);
    timer = setInterval(function () {
        setCursor(_c, zz + 1);
    }, 150);
})();