JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<div id="blockoverlay"></div>
<label><input id="asyncwait" type="checkbox"> Show async wait cursor</label>
<label><input id="blockwait" type="checkbox"> Show blocking wait cursor</label>

CSS

html,body {
    display: relative;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 4px;
    box-sizing: border-box;
}
body.wait {
    cursor: wait !important;
}
#blockoverlay {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 500;
    cursor: wait;
    display: none;
    background-color: white;
}

JavaScript

$('#asyncwait').on('change', function() {
    if ($(this).is(':checked')) {
        $('body').addClass('wait');
    } else {
        $('body').removeClass('wait');
    }
});
$('#blockwait').on('change', function() {
    $('#blockoverlay').show();
    $('#blockoverlay').css('opacity', 0.5);
    setTimeout(function() {
        $('#blockoverlay').hide();
        $('#blockwait').prop('checked', false);
    }, 5000);
});