Effect of loading in page

loading-page.css

#loading-page {
    background: rgba(204,204,204,.8);
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99998;
}

#loading-container {
    position: fixed;
    top: 50%;
    left: 50%;
}

#loading-content {
    width: 800px;
    text-align: center;
    margin-top: -50px;
    margin-left: -400px;
    height: 100px;
}

loading-page.html

<div id="loading-page">
    <script type="text/javascript">
    	document.write('<div id="loading-container"><p id="loading-content">' +
                       '<img src="/img/loading.gif" alt=""></p></div>');
    </script>
</div>

loading-page.js

function loadingPage() {
	setTimeout(function() {
		$('div#loading-page').fadeOut(function() {
			$(this).remove();
			$('body').removeAttr('style');
		});
	}, 1000);
}