wp加载动画不采用插件的方法

1、 添加 CSS 样式

.loader-background {
	overflow:hidden;
	position:fixed;
	width:100%;
	height:100%;
	z-index:9999999;
	top:0;
	pointer-events:none;
	background:rgba(255,255,255,0.5);
}
.spinner {
	margin:100px auto;
	width:40px;
	height:40px;
	position:relative;
	text-align:center;
	-webkit-animation:sk-rotate 2.0s infinite linear;
	animation:sk-rotate 2.0s infinite linear;
}
.dot1,.dot2 {
	width:60%;
	height:60%;
	display:inline-block;
	position:absolute;
	top:0;
	background-color:#0da872;
	border-radius:100%;
	-webkit-animation:sk-bounce 2.0s infinite ease-in-out;
	animation:sk-bounce 2.0s infinite ease-in-out;
}
.dot2 {
	top:auto;
	bottom:0;
	-webkit-animation-delay:-1.0s;
	animation-delay:-1.0s;
}
@-webkit-keyframes sk-rotate {
	100% {
	-webkit-transform:rotate(360deg)
}
}@keyframes sk-rotate {
	100% {
	transform:rotate(360deg);
	-webkit-transform:rotate(360deg)
}
}@-webkit-keyframes sk-bounce {
	0%,100% {
	-webkit-transform:scale(0.0)
}
50% {
	-webkit-transform:scale(1.0)
}
}@keyframes sk-bounce {
	0%,100% {
	transform:scale(0.0);
	-webkit-transform:scale(0.0);
}
50% {
	transform:scale(1.0);
	-webkit-transform:scale(1.0);
}
}

把以上CSS样式添加到主题的自定义代码中

2、 将加载层添加的顶部

<!-- Loader animation begin -->
<div id="pre-loader" class="loader-background">
	<div class="spinner">
		<div class="dot1">
		</div>
		<div class="dot2">
		</div>
	</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script type="text/javascript" language="JavaScript">
	//: 判断网页是否加载完成
document.onreadystatechange = function() {
    if (document.readyState == "complete") {
        $("#pre-loader").fadeOut("slow");
        document.getElementById("pre-loader").remove();
    }
}
</script>
<!-- Loader animation stop -->

将以上代码添加到自定义头部代码。
这部分代码是在主要内容显示之前加载。之所以加载这里，是因为放在最前头，可以在所有内容加载前先加载过渡动画。