首页 / WordPress教程 / WordPress主题页面顶部加载进度条的实现

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

    • 珂李斯

    发布于

    by

    wordpress主题页面顶部加载进度条的实现，大叔第一时间能想到的就是css3了，但是可能对IE低版本的浏览…

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

    类别：WordPress教程、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！