JSFiddle - React, Tailwind, and code Playground

HTML

<body class="loading">
  <p>
    Some text some text some text
  </p>
  <div class="modal"></div>
</body>

CSS

.modal {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  width:      100%;
  background: #eee
    url('https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.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

$(document).ready(function(){
	(function () {
	    $(document).ajaxStop(function(){
            $("body").removeClass("loading");
        });
	}());
})