Loader

	<!DOCTYPE html>
	<html>
	<head>
	<title>loader</title>
	</head>
	<body>

	<div id="preloader">
	<div id="status"> </div>
	</div>

	<h1>hello Varun</h1>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	</body>
	</html>

	<script type="text/javascript">
	//loader//
	jQuery(window).load(function() {
	$('#status').fadeOut();
	$('#preloader').delay(500).fadeOut('slow');
	$('body').delay(500).css({'overflow':'visible'});
	});
	</script>

	<style type="text/css">
	#preloader {position: fixed; top:0; left:0; right:0; bottom:0; background-color:#22394b;
	z-index:99999; }
	#status {width:235px; height:235px; position:absolute; left:50%; top:50%; background-image:url(images/logo.png); background-repeat:no-repeat;
	background-position:center; margin:-100px 0 0 -100px;}
	</style>

Code Design html