手机页面加载完成前的loading效果

注意：如果代码运行样式不对，请不要取消代码换行~

样式一：

只需要在header的头部加入以下代码，可根据实际需求修改：

<script type="text/javascript">
	var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;top:0;left:0;
	width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999;"><img src="{MODULE_URL}
	template/mobile/images/loading.gif" style="position:fixed;right:40%;top:40%;width:84px;
	height:84px;z-index:5;"/></div>';
	document.write(_LoadingHtml);
	document.onreadystatechange = completeLoading;
	function completeLoading() {
		if (document.readyState == "complete") {
			var loadingMask = document.getElementById('loadingDiv');
			loadingMask.parentNode.removeChild(loadingMask);
		}
	}
	</script>

样式二：

<style type="text/css">
/* 页面loading */
#spinners {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9999;}
.spinner {margin:  50% 30%;width: 40%;text-align: center;}
.spinner > div {width: 30px;height: 30px;background-color: #67CF22;border-radius: 100%;display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.spinner .bounce1 {-webkit-animation-delay: -0.32s;animation-delay: -0.32s;}
.spinner .bounce2 {-webkit-animation-delay: -0.16s;animation-delay: -0.16s;}
@-webkit-keyframes bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0.0) }40% { -webkit-transform: scale(1.0)}}
@keyframes bouncedelay {0%, 80%, 100% {transform: scale(0.0);-webkit-transform: scale(0.0);} 40% 
{transform: scale(1.0);-webkit-transform: scale(1.0);}}
</style>
<div id="spinners">
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>