linebar js 插件 NProgress 显示顶部进度条效果
效果如下图
网站
官网：http://ricostacruz.com/nprogress/
github：https://github.com/rstacruz/nprogress
下载
从github下载最新版的 source code
引入
从下载的代码中，取出 nprogress.css 和 nprogress.js 两个文件，放入你的网站，引入。
注意：nprogress.js 要放在 jquery.js 后面
调用
<script>
$('body').show();
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
</script>简单调用模板实例
本例子用的cdn，可以直接复制下面代码，重命名为 html ，运行。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>NProgress: slim progress bars in JavaScript</title>
<link href='https://unpkg.com/nprogress@0.2.0/nprogress.css' rel='stylesheet'/>
<style>
#nprogress .bar {
background: blue;
}
</style>
</head>
<body>
我是body，但是我没内容，搞笑不。
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src='https://unpkg.com/nprogress@0.2.0/nprogress.js'></script>
<script>
$('body').show();
NProgress.start();
setTimeout(function () {
NProgress.done();
$('.fade').removeClass('out');
}, 1000);
</script>
</body>
</html>其他自定义
改变加载线条的颜色
页面增加样式
<style>
#nprogress .bar {
background: blue;
}
</style>改变右上角转圈颜色
页面增加样式
<style>
#nprogress .spinner-icon {
border-top-color: red;
border-botton-color: red;
border-left-color: red;
border-right-color: red;
}
</style>取消右上角的转圈效果
打开 nprogress.css ，删除下面部分即可，大概在 33 行
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
0顶
0 踩
共 0 条评论