JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
<h2>Index</h2>

<a href="#">some <span class="red">text</span></a>

    <div class="modal"></div>
</body>

CSS

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
 .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
 body.loading {
    overflow: hidden;
}
/* Anytime the body has the loading class, our
   modal element will be visible */
 body.loading .modal {
    display: block;
}

JavaScript

$(function () {
    $("body").on({
        // When ajaxStart is fired, add 'loading' to body class
        ajaxStart: function () {
            $(this).addClass("loading");
        },
        // When ajaxStop is fired, remove 'loading' from body class
        ajaxStop: function () {
            $(this).removeClass("loading");
        }
    });

$("a").click(function () {
    $(this).addClass("loading");
    alert("hello");
});});