index.html

<!--
	描述：网页加载效果
-->


<!--首先引入必要的jQuery-->
<script src="js/jquery.min.js"></script>
<div class="loadingBg">
	<div class="loading">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>


<style>
	.loadingBg {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: white;
		z-index: 99999;
	}
	
	.loading {
		position: relative;
		width: 85px;
		height: 40px;
		margin: -20px auto auto -40px;
		top: 50%;
		left: 50%;
	}
	
	.loading span {
		display: inline-block;
		width: 8px;
		height: 100%;
		border-radius: 4px;
		background: lightgreen;
		-webkit-animation: load 1s ease infinite;
	}
	
	@-webkit-keyframes load {
		0%,
		100% {
			height: 40px;
			background: lightgreen;
		}
		50% {
			height: 70px;
			margin: -15px 0;
			background: lightblue;
		}
	}
	
	.loading span:nth-child(2) {
		-webkit-animation-delay: 0.2s;
	}
	
	.loading span:nth-child(3) {
		-webkit-animation-delay: 0.4s;
	}
	
	.loading span:nth-child(4) {
		-webkit-animation-delay: 0.6s;
	}
	
	.loading span:nth-child(5) {
		-webkit-animation-delay: 0.8s;
	}
</style>

<script>
document.onreadystatechange = function () {
    if (document.readyState == "complete") {    
        $(".loadingBg").fadeOut(500);
    }
 }	
</script>