Display loading image above page

Grey out background while showing loading img above it

HTML

<div id="abunchoftext">
Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious routine of forgotten code... While I nodded, nearly napping, suddenly there came a tapping... as of someone gently rapping - rapping at my office door. 'Tis the team leader, I muttered, tapping at my office door - only this and nothing more. Ah, distinctly I remember it was in the bleak December and each separate React print-out lay there crumpled on the floor. Eagerly I wished the morrow; vainly I had sought to borrow from Stack-O surcease from sorrow - sorrow for my routine's core. For the brilliant but unworking code my angels seem to just ignore. I'll be tweaking code... forevermore! - <a href="http://www.online-literature.com/poe/335/" target="_blank">Apologies To Poe</a></div>
<div id="myOverlay"></div>
<div id="loadingGIF"><img src="http://placekitten.com/150/80" /></div>
<button id="button">Submit</button>

CSS

#myOverlay{position:absolute;top:0;left:0;height:100%;width:100%;}
#myOverlay{background:black;backdrop-filter:blur(4px);opacity:.4;z-index:2;display:none;}

#loadingGIF{position:absolute;top:10%;left:35%;z-index:3;display:none;}

button{margin:20px;padding:10px 20px;}
body{font-family:Calibri, Helvetica, sans-serif;}

JavaScript

/*
http://stackoverflow.com/questions/28931791/jquery-how-to-grey-out-the-background-while-showing-the-loading-icon-over-it
*/

$("#button").click(function() {
    $('#myOverlay').show();
    $('#loadingGIF').show();
    setTimeout(function(){
			$('#myOverlay, #loadingGIF').hide();
    },2500);
});
/*  Or, remove overlay/image on click background... */
$('#myOverlay').click(function(){
	$('#myOverlay, #loadingGIF').hide();
});