JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog-box">
    </div>
    <div class="loading">
      <br /><br />
      <div>Loading...</div>
    </div>

CSS

.loading{
    width:200px;
    height:100px;
    background:#ccc;
    font-weight:bold;
    
}
.loading div{
    margin: auto 0px;
    text-align:center;
    vertical-align:middle;
}

JavaScript

function showLoading(){
  var $loading = $(".loading");
  var windowH = $(window).height();
  var windowW = $(window).width();

  $loading.css({
    position:"fixed",
    left: ((windowW - $loading.outerWidth())/2 + $(document).scrollLeft()),
    top: ((windowH - $loading.outerHeight())/2 + $(document).scrollTop())
  }).show();
}

function hideLoading(){
   $(".loading").hide();
}

 $(function(){
      showLoading();
    });