文章目錄

• • 效果（看頂部）
  • 安裝
  • 使用
  • • 1.基本用法
    • 2.高級用法

效果（看頂部）

安裝

CSDN地址（我設置的免積分，推薦下載）：https://download.csdn.net/download/weixin_45525272/14944311

GitHub地址：https://github.com/rstacruz/nprogres

外鏈引入方式（將包里的 .js .css移動到工程中）

<script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/>

NPM安裝方式

$ npm install --save nprogress import NProgress from 'nprogress' import 'nprogress/nprogress.css'

使用

1.基本用法

• 利用NProgress.start()顯示進度條

  NProgress.start()

• 利用NProgress.done()隱藏進度條

  NProgress.done()

2.高級用法

• 設置百分比：調用 .set(n) 方法，其中n的范圍0-1

  NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done()

• 增量：調用 .inc() 方法，以隨機量遞增進度條，永遠不會達到100%，用于每個圖像負載（或類似）

  NProgress.inc();

• 特定值增量：調用 .inc(n) 方法以特定值遞增進度條

  NProgress.inc(0.2); // This will get the current status value and adds 0.2 until status is 0.994

• 強制完成：通過傳遞 true 到 .done() 方法，將顯示進度條，即使它未顯示（默認如果不調用 .start() 方法， .done() 方法不會做任何事）

  NProgress.done(true);

• 獲取狀態值：使用 .status 獲取狀態值

  NProgress.status

總結

以上是生活随笔為你收集整理的nprogress 插件 网页顶部加载进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。