Github Star: 26k^[1] 官網(wǎng)^[2]

NProgress 是什么？

NProgress.js 是一個輕量級的 JavaScript 庫，用于在應(yīng)用的頁面頂部顯示一個進度條，指示頁面加載或異步操作的進度。它非常適合用于單頁面應(yīng)用程序（SPA），能夠在路由變化時給用戶友好的加載提示。本文是 NProgress.js 的基本使用方法和一些配置選項的詳細介紹。

快速開始

安裝和引入

NProgress.js 支持管理工具 npm 或 yarn 安裝，也支持 CDN 引入。

npm install nprogress -S
#
yarn add nprogress

引入時，別忘了引入 nprogress.css 樣式文件

啟動和結(jié)束進度條

NProgress.start(); // 啟動進度條
NProgress.done(); // 結(jié)束進度條

設(shè)置進度

NProgress.set(0.4); // 設(shè)置進度至 40%

設(shè)置進度百分比，參數(shù)取值 0 ~ 1 之間。如果傳 0 類似于調(diào)用 .start()，傳 1 類似于調(diào)用 .done() 方法。

遞增進度條

NProgress.inc(); // 隨機遞增進度條
NProgress.inc(0.2); // 以 0.2 的值遞增進度條

遞增進度條，以隨機量增加，永遠不會到達 100%。

配置選項

NProgress.configure({
  easing: 'ease', // 動畫方式
  speed: 500, // 遞增進度條的速度
  showSpinner: false, // 是否顯示加載指示器
  trickle: false, // 是否開啟自動遞增行為
  trickleSpeed: 200, // 自動遞增間隔
  minimum: 0.3, // 更改啟動時使用的最小百分比
  parent: 'body', // 指定進度條的父容器
  barSelector: '[role="bar"]', // 進度條選擇器
  spinnerSelector: '[role="spinner"]' // 加載指示器選擇器
});

配置項還有 template 自定義模板，為了保證正常工作，需要保留一個帶 role='bar' 的元素。參考默認模板。

NProgress.configure({
    template: `
    <div class="bar" role="bar">
      <div class="peg"></div>
    </div>
    <div class="spinner" role="spinner">
      <div class="spinner-icon"></div>
    </div>`
})

另外，通過覆蓋 nprogress.css 樣式，可以實現(xiàn)定制化樣式。

在 Vue 中使用

在 Vue 項目中，可以將 NProgress.js 集成到路由系統(tǒng)中，方便頁面跳轉(zhuǎn)時顯示進度條。在 router/index.js 中引入 NProgress 并在路由衛(wèi)士中調(diào)用相應(yīng)的 API。

import NProgress  from 'nprogress'
import 'nprogress/nprogress.css'
// 導(dǎo)入進度條
import { start, close } from '../utils/nprogress';
const router = new VueRouter({
  // ...
});
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});
router.afterEach(() => {
  NProgress.done();
});

修改進度條樣式

通過添加 CSS 樣式來自定義進度條的顏色和其他視覺效果。

#nprogress .bar {
  background: green !important; /* 自定義顏色 */
}

總結(jié)

NProgress.js 使用一種簡單的方式來改善用戶體驗，在單頁應(yīng)用中，通過在頁面跳轉(zhuǎn)期間顯示進度條，可以讓用戶知道頁面正在加載，從而減少用戶的等待焦慮感。通過本文相信你已經(jīng)能夠在項目中輕松使用 NProgress.js 了。

祝好！

引用鏈接

[1] Github Star: 26k: https://github.com/rstacruz/nprogress
[2] 官網(wǎng): https://ricostacruz.com/nprogress/