首先全站引入jquery
我用的是百度公共jquery库地址
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js
"></script>
样式1
在style.CSS添加代码
/** 「載入中」動畫 **/
#circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(10,10,10,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #808080;
z-index:1000;
width:50px;
height:50px;
margin:0 auto;
position:fixed;
left:30px;
bottom:30px;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite ease-in-out;
-o-animation:spinPulse 1s infinite ease-in-out;
-ms-animation:spinPulse 1s infinite ease-in-out;
}
#circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(20,20,20,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #202020;
z-index:1000;
width:30px;
height:30px;
margin:0 auto;
position:fixed;
left:40px;
bottom:40px;
-moz-animation:spinoffPulse 1s infinite linear;
-webkit-animation:spinoffPulse 1s infinite linear;
-o-animation:spinoffPulse 1s infinite linear;
-ms-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-o-keyframes spinPulse {
0% { -o-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
50% { -o-transform:rotate(145deg); opacity:1;}
100% { -o-transform:rotate(-320deg); opacity:0; }
}
@-o-keyframes spinoffPulse {
0% { -o-transform:rotate(0deg); }
100% { -o-transform:rotate(360deg); }
}
@-ms-keyframes spinPulse {
0% { -ms-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
50% { -ms-transform:rotate(145deg); opacity:1;}
100% { -ms-transform:rotate(-320deg); opacity:0; }
}
@-ms-keyframes spinoffPulse {
0% { -ms-transform:rotate(0deg); }
100% { -ms-transform:rotate(360deg); }
}
在主题内的「页首(header.php)」文件的
<body>
后添加显示代码
<div id="circle"></div><div id="circle1"></div>
在「页尾(footer.php)」内的前添加下列代码
<script>
jQuery(window).load(function() {
jQuery("#circle").fadeOut(500);
jQuery("#circle1").fadeOut(700);
});
</script>
样式2
在style.CSS添加代码
#loading {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
background: #000;
opacity: 0.7;
filter: alpha(opacity=70);
font-size: 14px;
line-height: 20px
}
#loading-one {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin: 50px 0 0 -80px;
padding: 3px 10px
}
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: -25px;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
position: absolute;
top: 50%;
left: 50%
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: -15px;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
position: absolute;
top: 50%;
left: 50%
}
@-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7
}
50% {
-moz-transform: rotate(145deg);
opacity: 1
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0
}
}
@-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg)
}
100% {
-moz-transform: rotate(360deg)
}
}
@-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0
}
}
@-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
在主题内的「页首(header.php)」文件的
<body>
后添加显示代码
<div id="loading"> <p id="loading-one">一日博客努力载入中...</p> <div class="circle"></div> <div class="circle1"></div> </div>
在「页尾(footer.php)」内的
</body>
前添加下列代码
<script>
jQuery(function() {
jQuery('#loading-one').empty().append('一日博客载入完成.').parent().fadeOut('slow');
jQuery('#loading').click(function() {
jQuery('#loading').fadeOut('slow');
});
});
</script>
样式3
在style.CSS添加代码
#loading {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
background: #000;
opacity: 0.7;
filter: alpha(opacity=70);
font-size: 14px;
line-height: 20px
}
#loading-one {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin: 50px 0 0 -80px;
padding: 3px 10px
}
.spinner {
position: absolute;
margin-right: 500px;
top: 50%;
left: 50%;
width: 50px;
height: 60px;
margin: 0 0 0 -20px;
font-size: 10px;
}
.spinner > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
在主题内的「页首(header.php)」文件的
<body>
后添加显示代码
<div id="loading">
<div id="loading-one"></div>
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
在「页尾(footer.php)」内的
</body>
前添加下列代码
<script>
jQuery(window).load(function() {
jQuery("#loading").fadeOut(500);
});
</script>
代码实现
其实很简单,核心代码是最后一段的jQuery
jQuery("#loading").fadeOut(500);
表示加载完成后,0.5s 淡出这个效果。
文章来源
给WordPress添加「加载中」动画
如何在wordpress博客中添加炫酷的加载中动画特效
使用 CSS3 实现超炫的 Loading(加载)动画效果
18 条评论
请问全站怎么引入jquery?
直接把代码加入到
<head>
标签前面即可。或者加到</body>
标签的前面即可John支持你
添加了一下,发现网页加载完了~这进度条还在转,都不能操作了……尴尬死
我也遇到这个问题了,其它浏览器都可以唯独Chrome和Safari一直转(╯°A°)╯︵○○○,最后才发现是jquery库没用https的原因(/TДT)/
我之前也有过这样情况,都是js的问题~~
打开F12,看看jquery有没有正常加载~我之前使用没问题的
正常啊,就不知道怎么回事就一直转圈,加载都完毕了……
哇!你也要弄半透明风格嘛?
对啊,纯白的不好看#[吐舌]我好多都是看你的代码的#[玫瑰]
刚刚用手机进来还以为是我的站呢!因为背景的人物
哈哈哈#(邪恶)
噫~#[滑稽]
还不错的。
你的博客好多特效,闪瞎#[呀咩爹]
哈哈,好像是有点多,眼看不过来,,,