NProgress
一. 下载
NProgress下载地址 http://ricostacruz.com/nprogress/
二. 引入 css 和 js 文件
<!-- nprogress css文件 -->
<
link
rel=
"stylesheet"
href=
"./assets/nprogress/nprogress.css">
<!-- nprogress js文件 -->
<
script
src=
"./assets/nprogress/nprogress.js"></
script>
三. 配置
NProgress.configure({
minimum: 0.1, // 配置最低百分比
ease: 'ease', // 配置动画模式
speed: '500', // 配置动画速度
trickle: false, // 关闭进度条步进
showSpinner: false, // 关闭进度环
parent: '#container' // 指定NProgress生成代码的父级元素, 默认body
});
四. 方法
// 进度条开始
NProgress.start();
// 百分比进度
NProgress.set(0.5);
// 进度一点点
NProgress.inc();
// 结束进度条
NProgress.done();
五. 全局启用, 一旦ajax请求发生, 开始使用
/* 这里使用用jquery配合演示 */
// ajax请求开始 进度条开始
$(window).ajaxStart(() => {
NProgress.start();
});
// ajax 请求结束进度条结束
$(window).ajaxComplete(() => {
NProgress.done();
})