Loading
◆◆0

wordpress主题页面顶部加载进度条的实现（纯代码）

来源：企鹅SEO 2019-04-25 11:19:22 WordPress 400 0

技术小学生微信公众号
腾讯云服务器大促销。
华为服务器

wordpress主题页面顶部加载进度条的实现，大叔第一时间能想到的就是css3了，但是可能对IE低版本的浏览器兼容性不好了，但是玩wordpress的，都无视IE了哈，那么，下面我就直接说教程吧，简单粗暴，css3+JQ了辣。

CSS3 
  1. body{
  2.                 margin:0;
  3.             }
  4.             #progress {
  5.                 position:fixed;
  6.                 height: 2px;
  7.                 background:#2085c5;
  8.                 transition:opacity 500ms linear
  9.             }
  10.             #progress.done {
  11.                 opacity:0
  12.             }
  13.             #progress span {
  14.                 position:absolute;
  15.                 height:2px;
  16.                 -webkit-box-shadow:#2085c5 1px 0 6px 1px;
  17.                 -webkit-border-radius:100%;
  18.                 opacity:1;
  19.                 width:150px;
  20.                 rightright:-10px;
  21.                 -webkit-animation:pulse 2s ease-out 0s infinite;
  22.             }
  24.             @-webkit-keyframes pulse {
  25.                 30% {
  26.                     opacity:.6
  27.                 }
  28.                 60% {
  29.                     opacity:0;
  30.                 }
  31.                 100% {
  32.                     opacity:.6
  33.                 }
  34. }

对的，仅针对针对webkit内核浏览器写的，处女座的你，可以适当的多写一些前缀。

HTML代码

  1. <div id=“progress”>
  2.             <span></span>
  3. </div>

jquery代码

  1. $({property: 0}).animate({property: 100}, {
  2.                 duration: 3000,
  3.                 step: function() {
  4.                     var percentage = Math.round(this.property);
  6.                     $(‘#progress’).css(‘width’,  percentage+“%”);
  8.                      if(percentage == 100) {
  9.                             $(“#progress”).addClass(“done”);//完成，隐藏进度条
  10.                         }
  11.                 }
  12. });

活学活用吧，上面设置的时间是3秒，根据自己的需求设定时间吧，到了这步，wordpress主题页面顶部加载进度条的实现就出现了，做为想学习者，我想你应该知道ctrl+f5是去缓存刷新，刷新后，看看刷新网页，顶部是不是出现了加载进度条了。。恩，就是这样！

技术小学生微信公众号
华为服务器
腾讯云服务器大促销。

声明：站长码字很辛苦啊,转载时请保留本声明及附带文章链接：https://blog.tag.gg/showinfo-19-18653-0.html
亲爱的：若该文章解决了您的问题,可否收藏+评论+分享呢？
上一篇：wordpress知更鸟Begin主题缩略图及方框添加圆角边框 ——WordPress美化教程
下一篇：为WordPress主题添加”网页加载中”特效