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是去缓存刷新,刷新后,看看刷新网页,顶部是不是出现了加载进度条了。。恩,就是这样!