nprogress 进度条使用

nprogress

• NProgress 是一个轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中
• 官网链接 http://ricostacruz.com/nprogress/

安装

npm

$ npm install --save nprogress

CDN

• https://unpkg.com/nprogress@0.2.0/nprogress.js
• https://unpkg.com/nprogress@0.2.0/nprogress.css

引入

script标签

<!-- 进度条 -->
<script src='nprogress.js'></script>
<!-- 样式必须引入 -->
<link rel='stylesheet' href='nprogress.css'/>

模块导入

import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' //样式必须引入

基本用法

• 只需调用start()和done()控制进度栏。

NProgress.start();
NProgress.done();

高级用法

百分比：要设置进度百分比

• 使用 .set(n) 方法
  • 其中n是之间的数字0..1。

NProgress.set(0.0);      // 与.start（）
NProgress.set(0.4);
NProgress.set(1.0);     //与.done（）相同

递增

• 要递增进度条，只需使用.inc()。这使它以随机量递增。这将永远不会达到100％：将其用于每次图像加载（或类似加载）。

NProgress.inc();

• 如果要增加特定值，可以将其作为参数传递

NProgress.inc(0.2);     //这将获取当前状态值并添加0.2直到状态为0.994

-强制完成
- 传递true到done()，即使未显示进度条也将显示进度条。（默认行为是.done()不会做任何事情，如果。开始()不叫）

NProgress.done(true);

• 获取状态值：要获取状态值，请使用.status

配置

参数	默认值	类型	说明
minimum	0.08	number	更改启动时使用的最小百分比
easing	ease/200	number/string	使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置,还有一个参数speed
trickle	true	boolean	通过将此设置为来关闭自动递增
trickleSpeed	/	number	调整点滴/增加的频率
showSpinner	true	boolean	是否显示加载icon
parent	body	string	指定此项以更改父容器

示例

 NProgress.configure({
    easing: 'speed',  // 动画方式    
    speed: 500,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
});