携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

安装

使用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请求封装不做展示

带你玩转NProgress进度条

安装