為大家精心挑選了 8 個(gè)漂亮的 Progress Bars 組件，并附上了 GitHub 鏈接和 vue.js 代碼示例。

1.easy-circular-progress

一個(gè)簡(jiǎn)單的循環(huán)進(jìn)度組件，帶有計(jì)數(shù)效果。

作者：dreambo8563

Github：https://github.com/dreambo8563/easy-circular-progress

2. vuejs-progress-bar

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

作者：larsmars

Github：https://github.com/larsmars/vuejs-progress-bar

3. Vue Spinner Component

可自定義的輕量級(jí)旋轉(zhuǎn)器圖標(biāo)組件。

你可以通過(guò)設(shè)置其屬性來(lái)自定義顏色、大小、深度、旋轉(zhuǎn)方向和速度等。所有的屬性均具有默認(rèn)值。你可以通過(guò)設(shè)置其狀態(tài)來(lái)控制它的顯示或隱藏。

Github：http://github.com/sergeyloysha/vue-spinner-component

4. VUE ARC COUNTER

該 Vue 組件在圓弧中生成計(jì)數(shù)器。其中角度、顏色、筆劃寬度、虛線之間的間距以及方向都可以通過(guò)屬性進(jìn)行控制。

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

5. vue-simple-progress

簡(jiǎn)單靈活的進(jìn)度條。vue-simple-progress 設(shè)計(jì)為輕量級(jí)的 Vue.js 進(jìn)度條，只需要很少的配置就能使用。

Github：https://github.com/dzwillia/vue-simple-progress

6. vue-wait

Vue 和 Vuex 可用的多進(jìn)程加載進(jìn)度管理。該項(xiàng)目以前名為 vuex-loading。

vue-wait 能夠幫你管理頁(yè)面上的多個(gè)加載狀態(tài)，而不會(huì)發(fā)生任何沖突。它基于一個(gè)“非常簡(jiǎn)單的想法”，可以管理具有多個(gè)加載狀態(tài)的陣列(或可選的 Vuex 存儲(chǔ))。通過(guò)內(nèi)置的加載組件偵聽(tīng)其注冊(cè)的 loader 即可立即變?yōu)榧虞d狀態(tài)。

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

7. vue-progress-path

支持自定義 SVG 路徑的可自定義進(jìn)度指示器和旋轉(zhuǎn)器圖標(biāo)。

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

8.vue-simple-spinner

簡(jiǎn)單靈活的旋轉(zhuǎn)器圖標(biāo)。vue-simple-spinner 設(shè)計(jì)為輕量級(jí)的 Vue.js 旋轉(zhuǎn)器圖標(biāo)，需要的配置最少。

Github：http://github.com/dzwillia/vue-simple-spinner