文章开始前先附上：NProgress官网和Github地址
安装
使用npm安装
npm install --save nprogress使用文件引入：
下载Github里文件：
引入下载的文件：
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>CDN引入：
基本用法
引入
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请求封装不做展示
