在web應用開發中，有很多加載資源或者網絡等待的場景需要在界面上做一個加載動畫，讓用戶知道你這個應用程序正在運行而不是已經掛掉了。

應用場景

如果你經常使用GitHub，那應該會注意到GitHub點擊鏈接后，會在網頁的頂部出現一個進度條

雖然用css3寫一個，也是分分鐘的事情。但是本著不重復造輪子的想法，找到了NProgress這個插件。

如何使用？

安裝

nprogress的安裝支持直接script標簽引用和npm包安裝

script引用

<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>或者也可以直接使用cdn https://unpkg.com/nprogress@0.2.0/nprogress.js https://unpkg.com/nprogress@0.2.0/nprogress.css

npm安裝

npm install --save nprogress

使用

簡單使用

nprogress使用方式非常的簡單

NProgress.start();

NProgress.done();

高級用法

使用set函數可以設置進度條的位置，支持0-1之間

NProgress.set(0.0); ? ? // Sorta same as .start()

NProgress.set(0.4);

NProgress.set(1.0); ? ? // Sorta same as .done()

inc()函數會隨機增加進度條的進度，但是永遠不會到達100%，除非你調用了done()函數

NProgress.inc();

自定義NProgress的樣式

nprogress的樣式只有一個簡單的css文件，可以很方便的自定義修改

---

github地址：https://github.com/rstacruz/nprogress

總結

以上是生活随笔為你收集整理的GitHub上24.3kStar的js进度条插件，确定不关注一下？的全部內容，希望文章能夠幫你解決所遇到的問題。

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