wordpress主题页面顶部加载进度条的实现，大叔第一时间能想到的就是css3了，但是可能对IE低版本的浏览器兼容性不好了，但是玩wordpress的，都无视IE了哈，那么，下面我就直接说教程吧，简单粗暴，css3+JQ了辣。
CSS3
- body{
- margin:0;
- }
- #progress {
- position:fixed;
- height: 2px;
- background:#2085c5;
- transition:opacity 500ms linear
- }
- #progress.done {
- opacity:0
- }
- #progress span {
- position:absolute;
- height:2px;
- -webkit-box-shadow:#2085c5 1px 0 6px 1px;
- -webkit-border-radius:100%;
- opacity:1;
- width:150px;
- rightright:-10px;
- -webkit-animation:pulse 2s ease-out 0s infinite;
- }
- @-webkit-keyframes pulse {
- 30% {
- opacity:.6
- }
- 60% {
- opacity:0;
- }
- 100% {
- opacity:.6
- }
- }
对的，仅针对针对webkit内核浏览器写的，处女座的你，可以适当的多写一些前缀。
HTML代码
- <div id="progress">
- <span></span>
- </div>
jquery代码
- $({property: 0}).animate({property: 100}, {
- duration: 3000,
- step: function() {
- var percentage = Math.round(this.property);
- $('#progress').css('width', percentage+"%");
- if(percentage == 100) {
- $("#progress").addClass("done");
- }
- }
- });
活学活用吧，上面设置的时间是3秒，根据自己的需求设定时间吧，到了这步，wordpress主题页面顶部加载进度条的实现就出现了，做为想学习者，我想你应该知道ctrl+f5是去缓存刷新，刷新后，看看刷新网页，顶部是不是出现了加载进度条了。。恩，就是这样！
