nprogress 插件 网页顶部加载进度条

文章目录

• ​​效果（看顶部）​​
• ​​安装​​
• ​​使用​​
• 
  

效果（看顶部）

安装

GitHub地址：​​https://github.com/rstacruz/nprogres​​

2. 外链引入方式（将包里的 .js .css移动到工程中）

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

3. 
   
5. NPM安装方式

$ npm install --save nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

6. 
   

使用

1.基本用法

• 利用NProgress.start()显示进度条

NProgress.start()

• 
  
• 利用NProgress.done()隐藏进度条

NProgress.done()

• 
  

2.高级用法

• 设置百分比：调用 .set(n) 方法，其中n的范围0-1

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

• 
  
• 增量：调用 .inc() 方法，以随机量递增进度条，永远不会达到100%，用于每个图像负载（或类似）

NProgress.inc();

• 
  
• 特定值增量：调用 .inc(n) 方法以特定值递增进度条

NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994

• 
  
• 强制完成：通过传递 true 到 .done() 方法，将显示进度条，即使它未显示（默认如果不调用 .start() 方法， .done() 方法不会做任何事）

NProgress.done(true);

• 
  
• 获取状态值：使用 .status 获取状态值

NProgress.status

•