共计 3416 个字符，预计需要花费 9 分钟才能阅读完成。
扩大浏览：《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 表格