带你玩转 NProgress 进度条

2022 年 9 月 18 日
河南
本文字数：1692 字
阅读完需：约 6 分钟

安装

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

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/a1f85e4cd2fc7e1ee00ddcfb4】。文章转载请联系作者。

海底烧烤店ai

关注

前端之行，任重道远！ 2022.08.25 加入

本科大三学生、CSDN前端领域新星创作者、华为云享专家、第十三届蓝桥杯国赛三等奖获得者

发布

暂无评论

创作场景

带你玩转 NProgress 进度条

安装

使用 npm 安装

使用文件引入：

基本用法

引入

开关和关闭

高级用法

百分比

递增

获取状态值

配置

最小值：minimum

缓动：easing 速度：speed

关闭递增：trickle

递增频率：trickleSpeed

圆圈加载：showSpinner

父容器：parent

修改样式：

使用技巧

以在 vue 中使用为例

海底烧烤店ai

评论