CSS:
.bg {
background: #000;
display: none;
height: 100%;
left: 0%;
opacity: 0.7;
position: fixed;
top: 0%;
width: 100%;
z-index: 5;
}
.loading {
bottom: 0%;
left: 0%;
margin: auto;
position: fixed;
right: 0%;
top: 0%;
z-index: 6;
}
HTML:
<div class="bg"></div>
<img alt="" class="loading" src="loading.gif" />
JS:
function preLoader(a) {
$('.bg, .loading')[a ? 'fadeIn' : 'fadeOut'](500);
}
/***********************/
preLoader(true);
$.post('test.php', {foo: true}, function(data) {
preLoader(false);
});