Simple website preloader

simple-preloader.html

// Paste html in your header
<div class="loader-wrap">
	<div class="loader-wrap-inner">
		<div class="loader-holder">
			<img src="your-loader.gif" alt="pre-loader-img" />
		</div>
	</div>
</div>

// Preloader style
<style>
.loader-wrap { 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	z-index: 999;
	background: rgba(0,0,0,1);
	transition: all ease-in-out .3s;
	opcity: 1;
}
.loaded .loader-wrap { opacity:0; visibility: hidden;}
.loader-wrap-inner { display: table; height: 100%; width: 100%;}
.loader-holder { display: table-cell; vertical-align: middle; text-align: center;}
</style>

// Preloader script
<script>
jQuery( document ).ready( function( $ ){
	$(window).load(function() {
		$('body').addClass('loaded');
	});
});
</script>