文章开始前先附上：NProgress官网和Github地址

安装

使用npm安装

npm install --save nprogress

使用文件引入：

下载Github里文件：

引入下载的文件：

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

CDN引入：

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

基本用法

引入

import NProgress from "nprogress";
import "nprogress/nprogress.css";

开关和关闭

start()开启NProgress进度条
done()关闭NProgress进度条

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

高级用法

百分比

要设置进度百分比，可调用set(n) ，其中 n 介于0和1 之间

NProgress.set(0.0);     // 相当于 .start()
NProgress.set(0.4);
NProgress.set(1.0);     // 相当于 .done()

递增

使用inc(n)设置递增进度条，递增时永远不会到达100%，其中n为自设的递增值，如果不传入n，则将以随机量递增

NProgress.inc(0.4);

这将获得当前状态值并加0.4，直到状态为0.994

获取状态值

使用status()

 console.log(NProgress.status());

配置

最小值：minimum

更改启动时使用的最小百分比。（默认值：0.08)

NProgress.configure({ minimum: 0.1 });

缓动：easing 速度：speed

使用缓动（CSS 缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认值：ease和200)

NProgress.configure({ easing: 'ease', speed: 500 });

css缓动可取值：

- `linear`    动画从开始到结束保持相同的速度。
- `ease`    默认值。动画有一个缓慢的开始，然后加速，在结束之前又变慢。
- `ease-in`    动画有一个缓慢的开始。
- `ease-out`    动画有一个缓慢的结束。
- `ease-in-out`    动画有一个缓慢的开始和一个缓慢的结束。
- `cubic-bezier(n,n,n,n)`    在三次贝塞尔（cubic-bezier）函数中定义自己的值。

可以是从 0 到 1 之间的数字值。

- `initial`    设置该属性为它的默认值。请参阅 initial。
- `inherit`    从父元素继承该属性。请参阅 inherit。

关闭递增：trickle

通过将其设置为false来关闭自动递增行为。（默认值：true)

NProgress.configure({ trickle: false });

递增频率：trickleSpeed

调整涓流/增量的频率，以毫秒为单位。

NProgress.configure({ trickleSpeed: 200 });

圆圈加载：showSpinner

showSpinner用来控制是否显示进度条右下方加载的小圆圈动画
通过将加载微调器设置为 false 来关闭它。（默认值：true)

NProgress.configure({ showSpinner: false });

父容器：parent

指定此选项可更改父容器。（默认值：body)

NProgress.configure({ parent: '#container' });

修改样式：

// 自定义进度条颜色
 #nprogress .bar {
     background: #333 !important; //自定义颜色
  }

使用技巧

NProgress最常见的用法是在发送请求或者路由跳转里进行可视化进度展示：

以在vue中使用为例

路由跳转中使用：

import { createRouter, createWebHistory } from "vue-router";
// 引入进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";
//路由实例
const router = createRouter({
    history: createWebHistory(),
    routes: [...],
});
//导航守卫
router.beforeEach(async(to, from, next) => {
    NProgress.start();
}
router.afterEach(() => {
    NProgress.done();
});

发送请求时中使用：

import axios from "axios";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
// 进度条设置
NProgress.configure({
    easing: "ease-in-out",
    speed: 300,
    trickleSpeed: 300,
});
//创建axios的一个实例
const instance = axios.create({
        //...
});
//请求拦截器
instance.interceptors.request.use(
    (config) => {
        NProgress.start();
        //...
    },
    (error) =>{
        //...
    }
);
//响应拦截器
instance.interceptors.response.use(
    (response) => {
        //响应成功
        NProgress.done();
        //...
    },
    (error) => {
        NProgress.done();
        //...
    }
);
export default instance;

以上两种使用情景仅展示NProgress用法，路由配置和axios请求封装不做展示