今天給大家分享一款超酷的仿yutube頂部載入進度條
NProgress。js
。
nprogress.js
一款
類似
youtube、Medium
等網站上的小進度條外掛
。
star高達22。7K
。
安裝/引入
透過npm方式安裝外掛。
$ npm i nprogress -S
透過js和css引入方式。
// CDN引入https：//unpkg。com/nprogress@0。2。0/nprogress。jshttps：//unpkg。com/nprogress@0。2。0/nprogress。css
使用
透過呼叫start（）和done（）方法即可控制進度條顯示和完成。
NProgress。start（）NProgress。done（）
還支援
百分比
和
緩慢步進
操作。
NProgress。set（0。6）NProgress。inc（0。2）
在vue。js專案中可以透過如下方式呼叫。
import NProgress from ‘nprogress’import ‘nprogress/nprogress。css’router。beforeEach（（to， from， next） => { NProgress。start（） next（）}）router。afterEach（（） => { NProgress。done（）}）
很多的網站都有使用這款進度條外掛，
非常適合
Turbolinks， Pjax
或其他Ajax密集型應用程式。
# 官網地址https：//ricostacruz。com/nprogress/# 倉庫地址https：//github。com/rstacruz/nprogress
End~ 以上就是這次的分享，感謝大家的閱讀。
