NProgress进度条简单使用

NProgress是什么

NProgress是一个开源的进度条库，用于跟踪Web应用程序和API的加载进度。NProgress允许您在网页上显示一个进度条，其颜色和长度可以自定义，以便更好地显示加载进度。

NProgress的工作原理是在后台运行一个进度条计算器，它会不断更新进度条的进度。当应用程序或API完成加载时，进度条将自动更新为100%，表示加载完成。

NProgress适用于各种Web应用程序，包括Web服务、RESTful API和Vue.js应用程序。它支持Windows、Linux和Mac OS X等操作系统。

NProgress的GitHub地址为https://github.com/NoumanEelbuy/NProgress，您可以在该项目的GitHub仓库中找到最新的NProgress版本和文档。

安装

// npm
npm install --save nprogress

//Yarn
yarn add nprogress

直接引入js、css或者通过cdn引入

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

使用方法

方法调用start和done

// 使用方法
NProgress.start(); // — 显示进度条
NProgress.done(); // — 结束进度条

通过调用 .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(); // — 增加一点点

通过使用done()让进度条关闭

NProgress.done(true); — 完成进度条

进度条配置

1. 通过 minimum 来修改最小百分比
NProgress.configure({ minimum: 0.1 });
2. 通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）
```js
NProgress.configure({ ease: ‘ease’, speed: 500 });
```js
3. 关闭进度条步进，设置 trickle 为 false。
```js
NProgress.configure({ trickle: false });
4. 调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms)
```js
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
5. 禁用进度环，设置 showSpinner 为 false
```js
NProgress.configure({ showSpinner: false });

进度条颜色改变

在使用start()函数前，改变样式的颜色：

注意都要 增加 !important; 否则无效
#nprogress .bar {
  background: #29d !important;
  height: 22px !important;
}

示例

在vue中使用

// router/index.js
import { createWebHistory, createRouter } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})