JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay"></div>
<img class="preloader" src="http://slanovskiy.cv.ua/assets/slanru/images/horizontal_loading.gif" />
<a href="#">Нажми меня</a>
<div id="result"></div>

CSS

.overlay, .preloader {
    position: fixed;
    display: none;    
}

.overlay {
    top: 0px; 
    left: 0px; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.2); 
    z-index: 2000; 
} 

.preloader {
    top: 40%; 
    left: 47%;
    width: 80px;
    height: auto;
    z-index: 2001;
}

JavaScript

$("a").click(function() {

    $('.preloader').fadeIn();
    $('.preloader').promise().done(function(){
        // теперь картинка полностью появилась
        var defer = $.Deferred();
        defer.then(function() {
            // подсчет закончен, прячем картинку
            $('.preloader').fadeOut();           
        });
        
        setTimeout(function() {
            $("#result").append("Выполнилась долгая функция");
            defer.resolve();
        }, 2000) ;
       
    });
});