Nprogress页面加载进度条的使用

哈哈小鬼~FE

已于 2024-12-11 11:29:36 修改

阅读量1.9k

点赞数 6

文章标签：前端 css vue.js

于 2024-11-13 17:25:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_53911056/article/details/143434604

版权

Nprogress是一个简单而实用的页面加载进度条工具，它显示的进度是虚假的（即不真实反映页面或接口加载的实际进度），但因其实现简单、性能消耗低且用户体验良好而受开发者使用。以下是对Nprogress的详细介绍和使用方法：

一、Nprogress的特点

简单高效：Nprogress的代码量较少，易于集成和使用。

虚假进度：通过模拟加载进度，避免了计算真实加载进度的复杂性，降低了性能消耗。

用户体验：提供直观的视觉反馈，让用户感知到页面正在加载，提升用户体验。

二、Nprogress的使用方法

1. 安装Nprogress

可以通过npm安装Nprogress，或者在项目中直接引用nprogress.js和nprogress.css文件。

使用npm安装：

 npm install --save nprogress

CDN使用，不下载：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>

2. 引入Nprogress

在Vue等项目中，通常会在main.js或入口文件中引入Nprogress。

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

3. 配置Nprogress

可以通过NProgress.configure方法来配置Nprogress的参数，如动画速度、缓冲动画类型等。

NProgress.configure({ 
  easing: 'ease', // 缓冲动画类型，可选值如'ease'、'linear'等 
  speed: 500, // 动画速度，单位为毫秒 
  trickleSpeed: 200, // 每次进度条步进的速度，单位为毫秒 
  showSpinner: false, // 是否显示环形进度动画 
  minimum: 0.2 // 设置开始时最低百分比  同inc
});

4. 控制进度条

开始加载：调用NProgress.start()方法来启动进度条。

加载完成：调用NProgress.done()方法来结束进度条。此时，进度条会缓慢加载到100%，并逐渐消失。

在Vue项目中，通常会结合路由守卫来使用Nprogress。在路由跳转前启动进度条，在路由跳转后结束进度条。

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


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

5. 其他方法

设置百分比：调用NProgress.set(n)方法来设置进度条的进度，其中n的取值范围为0到1。

产生随机增量：调用NProgress.inc(n)方法来产生一个随机增量，使进度条前进一段距离。

NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 1000, showSpinner: false })

三、自定义Nprogress

可以通过修改nprogress.css文件来自定义Nprogress的样式，如改变进度条的背景颜色、高度等。

举例：在vue项目中的app.vue中修改进度条样式

#nprogress .bar {
    background: red !important;
    height: 6px !important;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}

四、总结

简洁代码如下：

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

// NProgress.inc(0.2);
NProgress.configure({ 
  easing: 'ease', // 缓冲动画类型，可选值如'ease'、'linear'等 
  speed: 1000, // 动画速度，单位为毫秒 
  trickleSpeed: 200, // 每次进度条步进的速度，单位为毫秒 
  showSpinner: false, // 是否显示环形进度动画 
  minimum: 0.2 // 设置开始时最低百分比 
});

// ......

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

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

效果展示：