子比主题美化-为网页顶部加上加载进度条

jaysun

分享一个网页头部加一个网页加载进度条,类似于本站网站顶部所使用的效果,随着鼠标滚动不断前进,看起来还是挺有意思的。其实制作很简单,只需要用JS监听网页加载进度即可。

效果如图

20221023214117.jpg


使用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>

使用插件

nprogress是一个jQuery插件,只有几K大小。使用起来非常方便和简单。先引入

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

控制显示,下面这两句代码,分别放到页面开头和网页加载完成事件里面即可。

NProgress.start();//开始加载进度条
NProgress.done();//停止显示进度条

控制进度条的速度

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

下载和dome

https://ricostacruz.com/nprogress/

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

发表评论

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

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

目录[+]

取消
微信二维码
微信二维码
支付宝二维码