利用jquery和css代码为网页顶部加上加载进度条

追月流涟
萝莉JK制服

利用jquery和css代码为网页顶部加上加载进度条

网页头部加一个网页加载进度条,看起来还是挺有意思的。其实制作很简单,只需要用JS监听网页加载进度即可。

使用jQuery

$({property: 0}).animate({property: 100}, { 
    duration: 5000,//进度条加载进度的速度 
    step: function() { 
        var percentage = Math.round(this.property); 
        $('#progress').css('width',  percentage+"%"); 
        if(percentage == 100) { 
            $("#progress").addClass("done");//100%后消失 
        } 
    } 
});

css代码

body{ 
        margin:0; 
} 
#progress { 
        position:fixed; 
        height: 2px; 
        background:#b91f1f; 
        transition:opacity 500ms linear 
} 
#progress.done { 
        opacity:0 
} 
#progress span { 
        position:absolute; 
        height:2px; 
        opacity:1; 
        width:150px; 
        right:-10px; 
} 
 
@-webkit-keyframes pulse { 
        30% { 
                opacity:.6 
        } 
        60% { 
                opacity:0; 
        } 
        100% { 
                opacity:.6 
        } 
}

网页可以用JS在body头部插入一个元素,作为进度条,不想那么麻烦,也可以直接写代码

<body> 
        <div id="progress"> 
                <span><span> 
        </div> 
<body>

-----本页内容已结束,喜欢请分享-----


© 版权声明
版权声明
本站网站名称:追月流涟教程网
本站永久网址:https://www.zyds666.cn
网站侵权说明: 本站采用 CC BY-NC-SA 4.0 国际许可协议 进行许可,转载或引用本站文章应遵循相同协议。
1、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4、本站资源大多存储在云盘,如发现链接失效,请联系我们将会第一时间更新。
站长邮箱:abcdefghijklm1211@qq.com

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdogemojiemoji1emoji10emoji11emoji12emoji13emoji14emoji15emoji16emoji17emoji18emoji19emoji2emoji20emoji21emoji22emoji23emoji24emoji25emoji26emoji27emoji3emoji4emoji5emoji6emoji7emoji8emoji9
评论列表 (暂无评论,487人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码
我是分割线
我也是有底线哒~