擴展閲讀：《7 種最棒的 Vue Loading 加載動畫組件測評與推薦 - 窮盡市面上所有加載動畫效果（Vue loader）類型 - 卡拉雲》
Vue Loading 加載動畫組件 (Vue-loader) 看起來很簡單不重要，實際上它是保證用户留存的關鍵一環。選擇好 Loading 加載動畫，用户留存率翻倍。
本文介紹 7 種不同的加載動畫 UI 效果（Vue loader），每一種都有其對應的使用場景。舉例，旋轉加載動畫適合短時間加載，旋轉加載還能更細分，比如在按鈕上的旋轉加載，適合提交數據的極短時間，旋轉動畫在全局的適合多表格數據加載，旋轉動畫圖片可自定義的適合高度定製化的 APP / 網站等。再舉例，進度條類的加載動畫適合長時間加載，進度條類也可以更細分，比如有蒙層的進度條，有加載進度條帶取消按鈕，有加載進度條放在網頁頂部，顯得更輕盈快捷。
本文不僅是「Vue loader 動畫加載」組件測評，更是從產品層面介紹目前主流的 Vue Loader 加載動畫 UI 對應的應用場景，幫助大家選擇到最適合你的加載動畫組件。
另外，這個世界已經悄然發生變化，現在根本無需寫任何前端代碼，直接使用卡拉雲 —— 新一代低代碼開發工具幫你搭建後台工具，卡拉雲可一鍵接入常見數據庫及 API ，無需懂前端，內置完善的各類前端組件，無需調試，拖拽即用。原來三天的工作量，現在 1 小時搞定，誰用誰知道，用上早下班，詳見本文文末。
7 種不同類型的 Vue Loading 加載動畫組件
- Vue Simple Spinner - Loading 加載動畫基礎款，簡單可配置代碼優秀
- Vue Radial Progress - Loading 加載進度條基礎款，根據步長顯示進度，可自定義多種變量
- nprogress - 網頁頂部加載進度條，全新 UI 視覺效果愉悦
- TB Skeleton - APP / 網頁結構加載動畫，全局加載顯示王者
- Vue Loading Overlay - 加載進度條，內置任務取消按鈕，觸發事件取消用户執行任務
- Vue Progress Path - Google Material 設計風格，可替換你自己設計的 loading 圖，高度可定製化
- Vue Loading Button - 輕盈的按鈕 Loading 加載動畫效果組件
1. Vue Simple Spinner - Loading 加載動畫基礎款，簡單可配置代碼優秀
- github：https://github.com/dzwillia/v...
- npm：https://www.npmjs.com/package...
Vue Simple Spinner 雖然名字取的很低調，其實它非常強大，Vue Simple Spinner 提供了一個可定製的加載動畫，我們可以控制這個動畫的多種變量。
- 加載動畫的尺寸
- 前景色、背景色
- 動畫旋轉速度
- 動畫下方的標籤文字
- 還有很多更細節的可調的地方
2. Vue Radial Progress - Loading 加載進度條基礎款，根據步長顯示進度，可自定義多種變量
- github：https://github.com/wyzantinc/...
- npm：https://www.npmjs.com/package...
APP 加載動畫分為兩種，一種是用在點擊跳轉時的過度動畫，另一種是加載進度條。進度條用在需要用户長時間等待的應用場景，給用户階段性的預期目標動畫，減少用户一直看旋轉加載動畫疲勞而離開 app。
Vue Radial Progress 是進度條形式的加載動畫，你可以在它的設置裏設定總步長以及當前加載內容的實時步長，Vue Radial Progress 會幫你計算進度條動畫效果。
Vue Radial Progress 可設定參數
- 進度條圓形尺寸
- 總步數/已完成步數
- 細緻的顏色設定，可設定進度條漸變色，前景背景色
- 加載時間顯示
3. nprogress - Vue loader 網頁頂部加載進度條，全新 UI 視覺效果愉悦
- github：https://github.com/rstacruz/n...
- npm：https://www.npmjs.com/package...
nprogress 加載動畫組件在 vue loading 這麼細分的組件領域裏居然有高達 2萬+ 的 Star，以及一週 7 萬的下載量，可見它的質量和易用性有多麼強。
nprogress 除了常規的加載動畫外，它最大的特點是網頁頂部加載進度條。這種進度條的 UI 形式是放在網頁最頂部，高度幾個像素，一根加載進度線。它摒棄了加載進度條做成遮蓋效果或者彈窗效果那種繁重的彷彿永遠加載不完的感覺。輕盈的一根線走在網頁頂端，視覺效果非常愉悦。
4. TB Skeleton - APP / 網頁結構加載動畫，全局加載顯示王者
- github：https://github.com/anthinking...
- npm：https://www.npmjs.com/package...
APP / 網頁結構加載是近些年比較流行的全局加載方式，通常用在用户首次打開 APP / 網頁時。這種方式整體感非常強，用户如果不細琢磨，會以為結構加載動畫就是 APP / 網站本身。
TB Skeleton 會首先顯示網站框架和輪廓，然後待數據加載完畢後再顯示。
5. Vue Loading Overlay - 加載進度條，內置任務取消按鈕，觸發事件取消用户執行任務
- github：https://github.com/ankurk91/v...
- npm：https://www.npmjs.com/package...
Vue Loading Overlay 是全屏加載動畫的形式。比如，場景中有多個數據看板，當用户提交更新數據的操作時，我們希望全部數據看板更新完畢後加載動畫再消失時，Vue Loading Overlay 就是很好的選擇。
Vue Loading Overlay 還有一個特別的功能，就是在顯示加載動畫時，可以設置一個取消按鈕。當用户點擊加載動畫旁的取消按鈕後，可以觸發一個事件，讓正在執行的整個任務取消。這個功能很適合加載時間相對較長的任務，當用户不想等待，準備操作其他功能時，可以直接點擊取消。
6. Vue Progress Path - Google Material 設計風格，可替換你自己設計的 loading 圖，高度可定製化
- github：https://github.com/Akryum/vue...‣
- npm：https://www.npmjs.com/package...
Vue Progress Path 的開發這是 Vue 核心團隊成員 Guillaume Chau ，這個組件庫也是我最喜歡的加載動畫組件庫之一，不論從設計美感、動畫效果，還是功能上都非常優秀，走的 Google Material 的設計風格。
Vue Progress Path 使用上非常簡潔，乾淨利索。標配的 SVG 矢量圖，可設定樣式、顏色、動畫順時針 / 逆時針，更棒的地方在於，它允許用你自己設計的 SVG 矢量圖來替換加載動畫裏的圖片，也就是説，你可以做到真正意義上的自定義加載動畫。
7. Vue Loading Button - 輕盈的按鈕 Loading 加載動畫效果組件
- github：https://github.com/shwilliam/...
- npm：https://www.npmjs.com/package...
Vue Loading Button 相對於前面介紹的加載動畫更小巧簡潔，它主要放在按鈕的旁邊，當用户點擊按鈕後，按鈕變成 loading 加載動畫，讓整個用户操作動作更加連貫。這種加載動畫非常適合時間微微有一點點慢的應用場景，特別是表格 CRUD 數據的場景最合適。
總結
本文主要介紹 Vue Loading 加載組件，這些前端細節，現在已經不用我們自己手動引入。推薦使用新一代低代碼開發工具 - 卡拉雲。卡拉雲 內置各類前端組件，無需懂任何前端，僅需拖拽即可快速生成。
下圖為使用卡拉雲搭建的內部廣告投放監測系統，僅需拖拽，1小時搞定。
卡拉雲是新一代低代碼開發工具，免安裝部署，可一鍵接入包括 MySQL 在內的常見數據庫及 API。可根據自己的工作流，定製開發。無需繁瑣的前端開發，只需要簡單拖拽，即可快速搭建企業內部工具。原來三天的開發工作量，使用卡拉雲後可縮減至 1 小時，歡迎免費試用卡拉雲。
擴展閲讀：
- 最好用的七大頂級 API 接口測試工具
- 如何在 Vue 中加入圖表 - Vue echarts 使用教程
- 最好用的 5 款 React 富文本編輯器
- Postman 使用教程 - 手把手教你 API 接口測試
- 最好的 6 個免費天氣 API 接口對比測評
- 如何在 Vue 中導出數據至 Excel 表格
