使用代码为网页顶部加上加载进度条-开源源码

使用代码为网页顶部加上加载进度条

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

内容看完了

1:本网站名称：蜡笔傻新
2:本站永久网址：https://labishaxin.com/
3:本站部分内容收集于互联网，如果有侵权内容、请联系我们删除，不妥之处，敬请谅解
4:本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责
5:本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6:本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新

使用代码为网页顶部加上加载进度条

使用代码为网页顶部加上加载进度条

使用插件

请登录后发表评论