目录
🎉应用场景
🎉在Vue中使用
1.安装nprogress
2.配置进度条
3.配置进度条的颜色
4.其他配置选项
🎉结语
🎉应用场景
像页面中的这种加载进度条的效果，可以更好为用户提供视觉上的反馈，让他们知道应用正在加载数据或执行一些操作。这提高了用户体验，因为用户可以清晰地看到应用程序的活动状态。
🎉在Vue中使用
1.安装nprogress
首先我们用到的包是nprogress
可以看到虽然这个包是9年前的了，但是一周的下载量还是有一百多万，可想而知这个功能在开发中的作用是非常常用的。
使用npm安装
npm i nprogress2.配置进度条
首先我们要想好配置在哪个地方，其实比较好的选择是配置在路由鉴权中，因为路由切换时经常伴随着异步加载数据、组件等操作，这些操作可能需要一些时间，而加载进度条可以在此期间提供用户友好的反馈。通过在路由拦截中配置加载进度条，你可以掌握整个应用程序的加载状态，以及在路由之间切换时的进度。
我们可以新建一个文件来写路由鉴权，最后在main.js中引入即可
//路由鉴权
import router from '@/router/index.js'
import nProgress from 'nprogress'
import 'nprogress/nprogress.css' //引入进度条样式
//全局前置守卫
router.beforeEach((to, from, next) => {
nProgress.start() //进度条开始
next()
})
//全局后置守卫
router.afterEach((to, from) => {
nProgress.done() //进度条结束
})
这样子，进度条就可以使用了。
3.配置进度条的颜色
直接找到样式文件对其修改一下是最简单的
加载旋转icon样式
4.其他配置选项
minimum： 设置进度条的最小百分比。默认值为 0.08。当进度小于这个值时，进度条将被隐藏。
NProgress.configure({ minimum: 0.2 });
ease： 设置进度条的缓动方式。默认值为 'linear'，可以设置为 'ease' 或 'ease-in-out' 等。
NProgress.configure({ easing: 'ease');speed： 设置进度条的速度。默认值为 200，表示以毫秒为单位的动画持续时间
NProgress.configure({ speed: 500 });
showSpinner： 设置是否显示进度条右侧的旋转小圆圈。默认值为 true。
NProgress.configure({ showSpinner: false });
parent： 设置进度条的父元素。可以指定一个 CSS 选择器，将进度条附加到指定的父元素。
NProgress.configure({ parent: '#custom-container' });
trickle 和 trickleRate： 控制进度条渐进加载的方式。trickle 设置是否启用渐进加载，默认值为 true。trickleRate 设置每秒增加的进度百分比，默认值为 0.02。
NProgress.configure({ trickle: true, trickleRate: 0.02 });
🎉结语
还有更多的配置与玩法可以参考文档
参考文档
