wordpress主题页面顶部加载进度条的实现

2019年12月13日01:22:28 发表评论 热度401 ℃

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

CSS3 
  1. body{
  2.                 margin:0;
  3.             }
  4.             #progress {
  5.                 position:fixed;
  6.                 height2px;
  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.             }
  23.             @-webkit-keyframes pulse {
  24.                 30% {
  25.                     opacity:.6
  26.                 }
  27.                 60% {
  28.                     opacity:0;
  29.                 }
  30.                 100% {
  31.                     opacity:.6
  32.                 }
  33. }

对的,仅针对针对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);
  5.                     $('#progress').css('width',  percentage+"%");
  6.                      if(percentage == 100) {
  7.                             $("#progress").addClass("done");//完成,隐藏进度条
  8.                         }
  9.                 }
  10. });

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

瓜皮猪

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: