推薦 8 個漂亮的 vue.js 進度條組件

翻譯：瘋狂的技術宅

原文：https://jquerypluginsfree.com...

爲你們精心挑選了 8 個漂亮的 Progress Bars 組件，並附上 GitHub 連接和 vue.js 代碼示例。

1.easy-circular-progress

一個簡單的循環進度組件，帶有計數效果。

做者：dreambo8563

Github：https://github.com/dreambo856...

---

2.vuejs-progress-bar

vue.js 專用的 ProgressBar，基於SVG 矢量圖形。有直線、圓和圓柱 3 種模式：

做者：larsmars

Github：https://github.com/larsmars/v...

---

3.Vue Spinner Component

可自定義的輕量級旋轉器圖標組件。

你能夠經過設置其屬性來自定義顏色、大小、深度、旋轉方向和速度等。全部的屬性均具備默認值。你能夠經過設置其狀態來控制它的顯示或隱藏。

Github：http://github.com/sergeyloysh...

---

4.VUE ARC COUNTER

該 Vue 組件在圓弧中生成計數器。其中角度、顏色、筆劃寬度、虛線之間的間距以及方向均可以經過屬性進行控制。

Github：https://github.com/snirp/vue-...

---

5.vue-simple-progress

簡單靈活的進度條。vue-simple-progress 設計爲輕量級的 Vue.js 進度條，只須要不多的配置就能使用。

Github：https://github.com/dzwillia/v...

---

6.vue-wait

Vue 和 Vuex 可用的多進程加載進度管理。該項目之前名爲 vuex-loading。

vue-wait 可以幫你管理頁面上的多個加載狀態，而不會發生任何衝突。它基於一個「很是簡單的想法」，能夠管理具備多個加載狀態的陣列（或可選的 Vuex 存儲）。經過內置的加載組件偵聽其註冊的 loader 便可當即變爲加載狀態。

Github：http://github.com/f/vue-wait

---

7.vue-progress-path

支持自定義 SVG 路徑的可自定義進度指示器和旋轉器圖標。

Github：http://github.com/Akryum/vue-...

---

---

8.vue-simple-spinner

簡單靈活的旋轉器圖標。vue-simple-spinner 設計爲輕量級的 Vue.js 旋轉器圖標，須要的配置最少。

Github：http://github.com/dzwillia/vu...

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...