给WordPress添加“加载中”动画

Jul182013

作者：超级efly 发布：2013-07-18 19:48 分类：WordPress 阅读：5,127 46条评论

今天教大家一个在你WordPress网站访问有点慢时，可以提高用户体验的纯CSS“加载中”动画

插件（插件）版

从WordPress插件库下载

一、添加CSS动画代码

1、这是最主要的一个步骤，用处时来显示加载中的动画

2、把下列代码添加到你主题的“样式表 (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); }
}

/** “加载中”动画 **/

#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); }

}

二、添加显示代码

1、这一步的用处是把前面的CSS代码显示出来

2、在主题内的“页首 (header.php)”文件的 <body> 后同样添加下列代码

<div id="circle"></div><div id="circle1"></div>

1	<div id="circle"></div><div id="circle1"></div>

三、添加jQuery渐隐效果

1、这个步骤是用于在网页加载完成后是加载动画渐渐消失，而不是一直不停地转动

2、在“页尾 (footer.php)”内的 </body> 前添加下列代码就完咯

<script>
jQuery(window).load(function() {
	jQuery("#circle").fadeOut(500);
	jQuery("#circle1").fadeOut(700);
});
</script>

jQuery(window).load(function() {

jQuery("#circle").fadeOut(500);

jQuery("#circle1").fadeOut(700);

});

</script>

预览

本页左下角会永远旋转“加载中”动画

参考

WordPress页面加载时显示旋转的圆圈

总结

1、完成以上步骤后要清空快取才能显示效果

2、有问题可以回复

觉得这篇文章有用吗？分享一下让更多人受益吧！

本文固定链接：https://www.arefly.com/zh-cn/wordpress-loading/

本文章由“超级efly”于2013年07月18日发表于“WordPress”分类

你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站

转载请注明：给WordPress添加“加载中”动画 | 畅想资源

关键字：CSS, WordPress, 加载中

[上一篇] WordPress显示访客信息插件Show UserAgent

[下一篇] Mac使用Boot Camp安装Windows

您可能还会对这些文章感兴趣！

给WordPress添加“加载中”动画：目前有 45 条留言
访客以 25：20 大幅领先博主

评论载入中，请稍等……

14楼
feiyaj ：

感谢一下就成功了

2017-07-16 下午7:43 [回复]
13楼
西贝博客 ：

哈哈，这个还挺好玩的，炫炫的。

2015-06-14 上午8:51 [回复]
12楼
小忆：

好文章对我很有帮助

2015-04-30 上午12:15 [回复]
- 小忆：
  
  随便问一下进入页面的前几秒有后面就消失了
  
  2015-04-30 上午12:22 [回复]
11楼
四弦：

博主同志，经查，你的插件不支持HHVM
在我的服务器上你的插件导致我博客直接白掉。。。

2014-10-03 下午1:52 [回复]
- 超级efly ：
  
  其实并不只是我的插件的问题，而是HHVM对PHP的支持始终不是很好，所以如果插件无法使用，推荐使用纯代码方式自行添加，谢谢！
  
  2014-10-03 下午2:11 [回复]
  - 四弦：
    
    哎……HHVM快是快，就是支持不是很好……
    我原来的主题也不支持，只能弃主题保HHVM
    
    2014-10-03 下午2:12 [回复]
    - 超级efly ：
      
      其实速度真的并没有这么重要，整体网站的外观、内容才是最重要的，而且现在PHP也不是很慢吧？
      
      2014-10-03 下午2:53 [回复]
10楼
我就有 ：

很喜欢这个，很酷，我把他改了永久转！

2014-09-03 下午8:12 [回复]
- 超级efly ：
  
  我个人觉得永久转实在太奇怪了～老觉得像是没加载完成
  
  2014-09-08 下午6:32 [回复]
9楼
e杯咖啡 ：

我一直在想是要加在主题CSS好还是安装插件好?
安装插件会导致页面加载变慢?
但是写在主题的话，换了主题之后全部都要重弄，好纠结阿

顺便问问博主您侧边栏的"博客统计"怎么弄得?
今天签到啦！时间：上午10:51:11（使用Arefly评论框自动签到）

2014-08-23 下午12:35 [回复]
- 超级efly ：
  
  如果你经常换主题的话，就应该使用插件（现在插件对速度的影响已经几乎可以忽略不计了）而如果你是打算一直使用同一个主题，还是就添加代码至主题内较好
  本站右侧的博客统计是使用插件“Site Analytics Widget”（还是我自己做的）达成的～～
  
  2014-08-24 上午8:43 [回复]
8楼
ysam ：

mark
找时间折腾~

2014-08-06 下午3:31 [回复]
- 超级efly ：
  
  2014-08-06 下午3:45 [回复]
7楼
Carter ：

添加了隐藏代码，还是不生效（已经刷新了N次了

2014-07-05 下午12:37 [回复]
- 超级efly ：
  
  确定你的页面加入了jQuery么？这段代码一定需要jQuery才能工作的～
  
  2014-07-05 下午3:22 [回复]
  - Carter ：
    
    怎么弄啊！我不太会弄，求教
    
    2014-07-05 下午4:32 [回复]
    - 超级efly ：
      
      将下方代码添加到“header.php”中，然后点击更新档案就行啦！
      
      <script type='text/javascript' src='https://libs.baidu.com/jquery/2.1.1/jquery.min.js?ver=2.1.1'></script>
      
      1
      
      <script type='text/javascript' src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js?ver=2.1.1'></script>
      
      2014-07-05 下午4:41 [回复]
      - Carter ：
        
        放哪里都行吗？
        
        2014-07-05 下午5:13 [回复]
        
        超级efly ：
        
        最好放在 <head> 中～
        
        2014-07-05 下午9:59 [回复]
  - Carter ：
    
    还有，你显示我的这个系统是错的耶！我是Windows 8.1
    
    2014-07-05 下午4:34 [回复]
    - 超级efly ：
      
      呃。。是因为这个插件还暂时不支持Windows 8.1。。。
      
      2014-07-05 下午4:44 [回复]
    - 超级efly ：
      
      现在支持Windows 8.1啦～～
      
      2014-08-24 上午8:35 [回复]
      - Carter ：
        
        噢！耶！
        
        2014-08-25 下午7:32 [回复]
6楼
百赖小生 ：

这个不错的说。去试试了，谢谢博主写的这么吸纳关系。。

2013-12-17 下午5:42 [回复]
- 超级efly ：
  
  2013-12-17 下午7:27 [回复]
5楼
百家网络博客 ：

它不消失啊怎么办？

2013-12-12 上午11:50 [回复]
- 超级efly ：
  
  可能是你的SCRIPT代码没有加对位置，你再去检查一遍看看
  
  2013-12-16 下午9:59 [回复]
  - 百家网络博客 ：
    
    可是你说不用加SCRIPT会立马消失，加了只是缓慢消失呀。。。
    
    2013-12-16 下午10:06 [回复]
    - 超级efly ：
      
      额。。。说错了。是一定要加，不加就不会消失。。。
      
      2013-12-17 上午7:12 [回复]
  - 百家网络博客 ：
    
    你的这段消失代码可能有问题，我自己写了个解决问题了，望替换
    
    jQuery(function(){ jQuery('#circle,#circle1').fadeOut('slow'); });
    
    1
    2
    3
    
    jQuery(function(){
    jQuery('#circle,#circle1').fadeOut('slow');
    });
    
    2013-12-16 下午10:09 [回复]
    - 超级efly ：
      
      我的代码应该没问题，我自己就用的是我写的那个代码啊。。。
      
      2013-12-17 上午7:14 [回复]
  - 百家网络博客 ：
    
    scrip t没显示出来，被博主屏蔽了
    
    2013-12-16 下午10:11 [回复]
4楼
小刀：

添加渐隐代码也不消失是怎么回事

2013-08-30 上午7:46 [回复]
- 超级efly ：
  
  有时候刷新可能不会出现渐隐，但大部份时候还是会的，你多刷新几次试试看呢？
  
  2013-08-30 上午7:49 [回复]
地板
可可豆 ：

看过很多回但从不知道这个是正在载入中的意思~~

2013-07-20 上午11:18 [回复]
- 超级efly ：
  
  我觉得这个挺像加载中的
  
  2013-07-20 下午12:05 [回复]
板凳
Lan Tian ：

还有你这个国家怎么显示不出来，我什么事都没干啊

2013-07-19 上午8:54 [回复]
- 超级efly ：
  
  现在可以了，前面获取IP的方式出错了。。。
  
  2013-07-19 上午9:12 [回复]
沙发
Lan Tian ：

这是从小蒋博客弄来的吧，也不写转载

2013-07-19 上午8:53 [回复]
- 超级efly ：
  
  呃，我这个是从“经验公式”那看到的，在“参考”那
  
  2013-07-19 上午9:13 [回复]
- 经验公式 ：
  
  小蒋也不是原作者的啦。。。
  
  2013-07-19 上午10:40 [回复]
  - 超级efly ：
    
    对呀，这种网上到处都有，根本找不到谁是原作者
    PS：不知道为什么这条评论都要审核
    
    2013-07-19 上午10:43 [回复]
    - 经验公式 ：
      
      有什么敏感词吗。。不晓得。原作者貌似是hqq
      
      2013-07-19 下午12:40 [回复]
      - 超级efly ：
        
        2013-07-19 下午12:59 [回复]