恒富网

添加几行代码loading加载，动画代码就可以加强浏览者的体验,不在等待页面加载时感到枯燥，从而关闭网页，很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程，加载完成后提示消失，大部分都应用在网站的首页，今天就拿Emlog主题举例说明。

添加教程

1.把html代码添加到主题头部以内，把css远程链接改成自己的，css文件在附件。

<link rel="stylesheet" href="自己的域名/loading.css" />
<div id="Loadanimation" style="z-index:999999;">
<div id="Loadanimation-center">
<div id="Loadanimation-center-absolute">
<div class="cnm_object" id="cnm_four"></div>
<div class="cnm_object" id="cnm_three"></div>
<div class="cnm_object" id="cnm_two"></div>
<div class="cnm_object" id="cnm_one"></div>
</div>
</div>
</div>

2.css代码

#Loadanimation {
	background-color:#fff;
	height:100%;
	width:100%;
	position:fixed;
	z-index:1;
	margin-top:0px;
	top:0px;
}
#Loadanimation-center {
	width:100%;
	height:100%;
	position:relative;
}
#Loadanimation-center-absolute {
	position:absolute;
	left:50%;
	top:50%;
	height:200px;
	width:200px;
	margin-top:-100px;
	margin-left:-100px;
}
.cnm_object {
	-moz-border-radius:50% 50% 50% 50%;
	-webkit-border-radius:50% 50% 50% 50%;
	border-radius:50% 50% 50% 50%;
	position:absolute;
	border-left:5px solid #87CEFA;
	border-right:5px solid #FFC0CB;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	-webkit-animation:animate 2.5s infinite;
	animation:animate 2.5s infinite;
}
#cnm_one {
	left:75px;
	top:75px;
	width:50px;
	height:50px;
}
#cnm_two {
	left:65px;
	top:65px;
	width:70px;
	height:70px;
	-webkit-animation-delay:0.1s;
	animation-delay:0.1s;
}
#cnm_three {
	left:55px;
	top:55px;
	width:90px;
	height:90px;
	-webkit-animation-delay:0.2s;
	animation-delay:0.2s;
}
#cnm_four {
	left:45px;
	top:45px;
	width:110px;
	height:110px;
	-webkit-animation-delay:0.3s;
	animation-delay:0.3s;
}
@-webkit-keyframes animate {
	50% {
	-ms-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
}
100% {
	-ms-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
;}@keyframes animate {
	50% {
	-ms-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
}
100% {
	-ms-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
;}

3.把下面javascript代码添加到主题头部以内访问网站刷新缓存就可以看到loading加载动画了。

<script>
$(function(){ 
    $("#Loadanimation").fadeOut(540); 
});
</script>