JSFiddle - React, Tailwind, and code Playground

HTML

<button id="carregar">Carregar</button>
    <div id="loading">
      <img src="http://i.stack.imgur.com/Z4BUx.gif" alt="Carregando..." title="Carregando...">
    </div>

CSS

#loading {
    display:none;
    position:fixed;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.3);
    width:100%;
    height:100%;
    overflow:hidden;
    padding:50% 0;
    margin:0;
    text-align:center;
}

#loading img{
    display:inline-block;
    margin:-8px 0 -8px 0;
}

JavaScript

jQuery(document).ready(function($) {

    $("#carregar").on('click', function(){

        $("#loading").fadeIn('fast');

        setTimeout(function(){
            $("#loading").fadeOut('fast');
        }, 5000);

    });

});