nprogress库学习

NProgress 是一个轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中

官网

https://github.com/rstacruz/nprogress

使用

引入js和css

<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>

简单上手

NProgress.start();
 setTimeout(() => {
     NProgress.done();
 }, 1000);

设置百分比

setInterval(() => {
    if(startPercent>1){
        NProgress.done();
        return;
    }
    NProgress.set(startPercent)
    startPercent+=0.1;
}, 500);

递增进度条

//要递增进度条，只需使用 .inc()。 这将以随机量递增。 该值永远不会达到 100%：每次加载图像（或类似情况）时都要使用它。
setInterval(() => {
    NProgress.inc(0.2);
}, 500);

强制停止

//强制停止,通过向 done() 传递 true，即使进度条没有显示，也会显示出来。 (默认情况下，如果 .start() 没有被调用，.done() 将不会执行任何操作）
  setTimeout(() => {
      NProgress.done(true);
  }, 3*1000);

配置

设置最小值minimum

//1. 设置最小值minimum，更改启动时使用的最小百分比。 (默认值：0.08）
NProgress.configure({ minimum: 0.1 });

模板

//2. 模板您可以使用模板更改标记。 要保持进度条正常工作，请在其中保留role='bar'的元素。 请参考默认模板。
//'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>
NProgress.configure({
    template: '<div class="bar" role="bar">test</div>'
});

平滑和速度

//平滑和速度,使用平滑（CSS 缓和字符串）和速度（毫秒）调整动画设置。 (默认值：ease 和 200）
//https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
NProgress.configure({ easing: 'linear', speed: 500 });

trickle

//trickle 将此项设置为 false，关闭自动递增行为。 (默认值：true）
NProgress.configure({ trickle: false });

trickleSpeed

//trickleSpeed 调整trickle/递增的频率（毫秒）。
NProgress.configure({ trickleSpeed: 200 });

显示旋转器

//显示旋转器，将 "加载旋转器 "设置为 "false"，关闭加载旋转器
NProgress.configure({ showSpinner: false });

父级

//父级指定此项可更改父容器。 (默认值：body）
NProgress.configure({ parent: '#container' });

自定义

自定义，只需按照自己的喜好编辑 nprogress.css。
小贴士：你可能只想找到并替换 #29d 的出现位置。附带的 CSS 文件非常简单…事实上，你可以随意废掉它，创建自己的 CSS 文件！

参考

https://www.jianshu.com/p/753c7b6fab4d