简介
nprogress 是一个轻量级的进度条组件，它可以在页面加载、翻页等网络请求时显示进度条，为用户提供更好的体验。nprogress 支持多种浏览器，并且可以通过配置来自定义进度条的样式。
安装
使用 npm 进行安装：
npm install nprogress --save
使用方法
引入
在需要使用 nprogress 的页面中，引入 nprogress 包和其样式文件：
import 'nprogress/nprogress.css' import NProgress from 'nprogress'
开始和结束进度条
nprogress 提供了三个方法来控制进度条：start()、done()、inc()。
// 开始进度条 NProgress.start() // 结束进度条 NProgress.done()
在发送网络请求时，可以在请求开始和结束的回调函数中分别调用这两个方法，实现进度条的显示和消失：
-- -------------------- ---- ------- ---------------------- - ----------------- ----------------------- - ----- ---------------- - -------------------------------- - ---- - -------------------- ------------------------------ - ---- - -------------------------- - ---------------- ------------------------ - ---------------- --展开代码
其中，set() 方法可以设置进度条的当前进度，取值范围为 0 到 1。
自定义进度条样式
nprogress 的样式可以通过 CSS 来进行调整。在引入 nprogress 样式文件后，可以定义自己的样式：
#nprogress .bar { background: red; } #nprogress .peg { box-shadow: 0 0 10px red, 0 0 5px red; }
总结
nprogress 提供了一种简单易用的进度条组件，可以为用户提供更好的体验。使用 nprogress 可以方便地控制进度条的显示和消失，并且可以通过配置来自定义进度条的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32337
