为了提升用户体验，网站添加Loading加载效果至关重要。加载效果需具备视觉吸引、加载速度、交互性、兼容性和简洁性等特点。本文将为您介绍如何在网站中实现一个美观且实用的Loading加载效果。
方案一
1、新建Loading样式的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;
}
.xccx_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;
}
#xccx_one{
left:75px;
top:75px;
width:50px;
height:50px;
}
#xccx_two{
left:65px;
top:65px;
width:70px;
height:70px;
-webkit-animation-delay:0.1s;
animation-delay:0.1s;
}
#xccx_three{
left:55px;
top:55px;
width:90px;
height:90px;
-webkit-animation-delay:0.2s;animation-delay:0.2s;
}
#xccx_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);
}
}2、将以下代码填写入头部文件（一般都是主题目录下的 header.php 文件）
<div id="Loadanimation" style="z-index:999999;">
<div id="Loadanimation-center">
<div id="Loadanimation-center-absolute">
<div class="xccx_object" id="xccx_four"></div>
<div class="xccx_object" id="xccx_three"></div>
<div class="xccx_object" id="xccx_two"></div>
<div class="xccx_object" id="xccx_one"></div>
</div>
</div>
</div>
<script>
$(function(){
$("#Loadanimation").fadeOut(540);
});
</script>注意： fadeOut 里面填写的是毫秒数
上面提供参考的Loading可以自定义替换，但js代码不能动。
方案二
1、给需要添加Loading加载动画效果的网站或网页引用jQuery库
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>2、将以下代码添加到 head 标签前
<!-- 刷新加载动画 -->
<div id="PageLoading" style="z-index:99999999999;">
<div id="PageLoading-center">
<div id="PageLoading-center-absolute">
<div class="object" id="object_four"></div>
<div class="object" id="object_three"></div>
<div class="object" id="object_two"></div>
<div class="object" id="object_one"></div>
</div></div></div>...3、将以下代码添加到 body 标签前
<!-- 刷新加载动画 -->
<script>
$(function(){ $("#PageLoading").fadeOut(530); });
</script>...4、新建css样式文件（比如：yjvc.css），并引用该文件
#PageLoading {
background-color:#fff;
height:100%;
width:100%;
position:fixed;
z-index:1;
margin-top:0px;
top:0px;
}
#PageLoading-center {
width:100%;
height:100%;
position:relative;
}
#PageLoading-center-absolute {
position:absolute;
left:50%;
top:50%;
height:200px;
width:200px;
margin-top:-100px;
margin-left:-100px;
}
.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;
}
#object_one {
left:75px;
top:75px;
width:50px;
height:50px;
}
#object_two {
left:65px;
top:65px;
width:70px;
height:70px;
-webkit-animation-delay:0.1s;
animation-delay:0.1s;
}
#object_three {
left:55px;
top:55px;
width:90px;
height:90px;
-webkit-animation-delay:0.2s;
animation-delay:0.2s;
}
#object_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);
}
}...