把NProgress.css和NProgress.js加进我们的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<!-- 微信加载时进度条-->
<link rel="stylesheet" href="css/nprogress.css">
<script src="js/jquery.min.js"></script>
<script src="js/nprogress.js"></script>
</head>
<body>
<button>测试</button>
<script>
NProgress.configure({
showSpinner:false'',
partent:'body' //进度条绑定到body上
});
$("button").on('click',function(){
NProgress.start();
$(document).ready(function(){
NProgress.done();
})
});
</script>
</body>
</html>
css 里面自己改变进度条的样式
初始化参数:
<pre name="code" class="javascript">var Settings = NProgress.settings = {
minimum: 0.08,
easing: 'linear',
positionUsing: '',
speed: 350,
trickle: true,
trickleSpeed: 250,
showSpinner: true, /* 是否显示旋转的小圆*/
barSelector: '[role="bar"]', /* 直线进度条*/
spinnerSelector: '[role="spinner"]', /* 圆形的转的圈*/
parent: 'body',
template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
};
其他可以参考学习博客:
:http://c7sky.com/nprogress.html
<span style="font-family: Arial, Helvetica, sans-serif;">http://www.cnblogs.com/xuange306/p/5122451.html 介绍nprogress和pace.js进度条插件 </span>
<span style="font-family: Arial, Helvetica, sans-serif;">nprogress官网:</span><span style="font-family: Arial, Helvetica, sans-serif;">http://ricostacruz.com/nprogress/</span>
<span style="font-family: Arial, Helvetica, sans-serif;">githup项目:</span><span style="font-family: Arial, Helvetica, sans-serif;">https://github.com/rstacruz/nprogress/</span>