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

效果（看顶部）

安装

CSDN地址（我设置的免积分，推荐下载）：https://download.csdn.net/download/weixin_45525272/14944311

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

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

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

2. NPM安装方式

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

使用

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