Preload

preload.html

<style>
.loader {
	background: none repeat scroll 0 0 #ffffff;
	bottom: 0;
	height: 100%;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 9999;
}
	.loaderInner {
		background-image: url("../img/load.gif");
		background-repeat: no-repeat;
		background-position: center center;
		background-color: #fff;
		background-size: 100%;
		height: 60px;
		width: 60px;
		margin-top: -30px;
		margin-left: -30px;
		left: 50%;
		top: 50%;
		position: absolute;
	}
</style>

<!-- Pre-loader -->
	<div class="loader">
		<div class="loaderInner"></div>
	</div>
<!-- Pre-loader -->

<script>
	$(document).ready(function () {
		// Pre-loader
		$(".loaderInner").fadeOut(); 
		$(".loader").delay(400).fadeOut("slow"); 
	});
</script>