wordpress主题页面顶部加载进度条的实现（纯代码）
小鹿系列竞价软件覆盖百度、360、搜狗、神马四大搜索平台，采用独创的竞价算法，智能精准出价，一键批量查排名，根据关键词位置实时调整出价，降低出价虚高，稳定排名，节省企业预算。
小鹿竞价软件专题介绍：https://www.xiaolutg.com/bidding/fengchao?ref=menu
wordpress主题页面顶部加载进度条的实现，大叔第一时间能想到的就是css3了，但是可能对IE低版本的浏览器兼容性不好了，但是玩wordpress的，都无视IE了哈，那么，下面我就直接说教程吧，简单粗暴，css3+JQ了辣。
- body{
- margin:0;
- }
- #progress{
- position:fixed;
- height:2px;
- background:#2085c5;
- transition:opacity500mslinear
- }
- #progress.done{
- opacity:0
- }
- #progressspan{
- position:absolute;
- height:2px;
- -webkit-box-shadow:#2085c51px06px1px;
- -webkit-border-radius:100%;
- opacity:1;
- width:150px;
- rightright:-10px;
- -webkit-animation:pulse2sease-out0sinfinite;
- }
- @-webkit-keyframespulse{
- 30%{
- opacity:.6
- }
- 60%{
- opacity:0;
- }
- 100%{
- opacity:.6
- }
- }
对的，仅针对针对webkit内核浏览器写的，处女座的你，可以适当的多写一些前缀。
HTML代码
- <divid=“progress”>
- <span></span>
- </div>
jquery代码
- $({property:0}).animate({property:100},{
- duration:3000,
- step:function(){
- varpercentage=Math.round(this.property);
- $(‘#progress’).css(‘width’,percentage+“%”);
- if(percentage==100){
- $(“#progress”).addClass(“done”);//完成，隐藏进度条
- }
- }
- });
活学活用吧，上面设置的时间是3秒，根据自己的需求设定时间吧，到了这步，wordpress主题页面顶部加载进度条的实现就出现了，做为想学习者，我想你应该知道ctrl+f5是去缓存刷新，刷新后，看看刷新网页，顶部是不是出现了加载进度条了。。恩，就是这样！
标签：
小鹿SEO优化
分享至：
关注公众号 获取更多干货资讯