JSFiddle - React, Tailwind, and code Playground

HTML

<p>тут типа всякий текст и картинки одним словом что там бывает на странице</p>
<button class="btn">Кнопка</button>
<div class="preloader">
  Loading...
</div>

CSS

.preloader {
  background-color: rgba(0, 0, 0, .7);
  color: #fff;
  display: none;
  left: 0;
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
}
.preloader.active {
  display: block;
}

JavaScript

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

$('.btn').on('click', function() {
	$('.preloader').addClass('active')
  
	$.get('/echo/json', function(data) {
    // Эмулируем долгий запрос
    sleep(2000).then(function() {
      $('.preloader').removeClass('active')
    })
  })
})