使用这 6个Vue加载动画库来减少我们网站的跳出率

阻止人们离开我们的网站的一种方法是添加视觉反馈，让他们知道我们的网页正在加载而不是坏了。视觉反馈还吸引了人们的注意力，因此等待时间似乎比静态屏幕要短得多。

无论是添加微调动画还是添加实际进度条，提供美观的视觉元素都可以改善网站的性能，也会让访问者体验更加的好。

对于Vue开发人员而言，有大量类似的库供我们使用。

在本文中，分享 6 个我的最爱。

1. Vue Simple Spinner

 

github：https://dzwillia.github.io/vue-simple-spinner/examples/

顾名思义，这是一个非常简单的组件，但功能仍然非常强大。Vue Simple Spinner提供了可定制加载样式。使用 props，我们可以控制对应的样式：

• Size
• Background and foreground colors
• Speed
• Label Text
• Much more…

安装命令：

1. npm install vue-simple-spinner --save. 

然后，将其导入到组件中，在模板中进行声明，然后更改所需的 props:

1. <template> 
2.    <vue-simple-spinner size="medium" /> 
3. </template> 
4. <script> 
5. import VueSimpleSpinner from 'vue-simple-spinner' 
6. export default { 
7.    components: {  
8.       VueSimpleSpinner 
9.    } 
10. } 

效果如下：

2. Vue Radial Progress

 

github 地址：https://github.com/wyzantinc/vue-radial-progress

如果你想要的是一个真正的进度条而不是旋转动画，Vue Radial Progress 一个非常棒的库。

Vue Radial Progress 可以在在进度栏中设置步骤数以及用户当前所处的步骤。然后，根据完成的数量填充进度条的一定百分比。

具有平滑的动画，可自定义的功能以及基于SVG的填充系统，当您具有包含多个离散步骤的异步过程时，此库将非常强大。

安装：

1. npm install --save vue-radial-progress 

此外，该库使用组件插槽使圆内添加文本变得简单

1. <template> 
2.   <radial-progress-bar :diameter="200" 
3.                        :completed-steps="completedSteps" 
4.                        :total-steps="totalSteps"> 
5.    <p>Total steps: {{ totalSteps }}</p> 
6.    <p>Completed steps: {{ completedSteps }}</p> 
7.   </radial-progress-bar> 
8. </template> 
9.  
10. <script> 
11. import RadialProgressBar from 'vue-radial-progress' 
12.  
13. export default { 
14.   data () { 
15.     return { 
16.       completedSteps: 0, 
17.       totalSteps: 10 
18.     } 
19.   }, 
20.  
21.   components: { 
22.     RadialProgressBar 
23.   } 
24. } 
25. </script> 

3.Vue Loading Overlay

 

github: https://github.com/ankurk91/vue-loading-overlay

**Vue Loading Overlay **是全屏加载组件的理想解决方案。例如，如果应用程序包含某种仪表板，并且要等到所有数据加载完毕后再让用户四处点击，则此库很有用。

这个库还有一个好用的特性就是加载时，用户点击遮罩，可以取消加载，并触发一个事件，我们可以使用该事件取消正在运行的任何任务。

添加此功能，可以允许用户自行决定任务何时花费太长时间来加载和退出。这意味着他们不必离开页面。

安装命令：

1. npm install --save vue-loading-overlay 

下面是 Loading Overlay library 使用示例：

1. <template> 
2.     <div class="vld-parent"> 
3.         <loading :active.sync="isLoading"  
4.         :can-cancel="true"  
5.         :on-cancel="onCancel" 
6.         :is-full-page="fullPage"></loading> 
7.          
8.         <label><input type="checkbox" v-model="fullPage">Full page?</label> 
9.         <button @click.prevent="doAjax">fetch Data</button> 
10.     </div> 
11. </template> 
12.  
13. <script> 
14.     // Import component 
15.     import Loading from 'vue-loading-overlay'; 
16.     // Import stylesheet 
17.     import 'vue-loading-overlay/dist/vue-loading.css'; 
18.      
19.     export default { 
20.         data() { 
21.             return { 
22.                 isLoading: false, 
23.                 fullPage: true 
24.             } 
25.         }, 
26.         components: { 
27.             Loading 
28.         }, 
29.         methods: { 
30.             doAjax() { 
31.                 this.isLoading = true; 
32.                 // simulate AJAX 
33.                 setTimeout(() => { 
34.                   this.isLoading = false 
35.                 },5000) 
36.             }, 
37.             onCancel() { 
38.               console.log('User cancelled the loader.') 
39.             } 
40.         } 
41.     } 
42. </script> 

4. Vue Progress Path

 

github 地址：https://github.com/Akryum/vue-progress-path

Vue Progress Path 是最流行的加载库之一。由 Vue Core团队成员Guillaume Chau创建，这也是我最喜欢使用的工具之一。

使用 SVG，Vue Progress Path 会创建成形的进度条。它带有几个内置的形状，但是最强大的功能是能够传递我们自己的SVG形状-这意味着无限的可能性。

使用npm i --save vue-progress-path将其添加到项目中，然后使用将该文件全局添加到src/main.js文件中。

1. import 'vue-progress-path/dist/vue-progress-path.css' 
2. import VueProgress from 'vue-progress-path' 
3.  
4. Vue.use(VueProgress, { 
5.   // defaultShape: 'circle', 
6. }) 

现在，来看看如何向组件添加进度 path 。

1. <loading-progress 
2.   :progress="progress" 
3.   :indeterminate="indeterminate" 
4.   :counter-clockwise="counterClockwise" 
5.   :hide-background="hideBackground" 
6.   shape="semicircle" 
7.   size="64" 
8. /> 

这个库还有一个很好地方，更改样式无须通过 props ，直接使用CSS代码来编辑样式：

1. .vue-progress-path path { 
2.   stroke-width: 12; 
3. } 
4.  
5. .vue-progress-path .progress { 
6.   stroke: red; 
7. } 

5. Vue Loading Button

 

github 地址：https://github.com/shwilliam/vue-loading-button

Vue Loading Button 是一种简单而有效的方式，可以向用户显示某些内容正在加载。

它所做的只是在按钮被点击时添加一个转轮动画。但有了平滑的动画，它可以创建一个无缝的外观，使网站流行。

安装：

1. npm install --save vue-loading-button 

示例：

1. <template> 
2.    <VueLoadingButton aria-label='Send message' /> 
3. </template> 
4. <script> 
5. import VueLoadingButton from 'vue-loading-button' 
6.  
7. export default { 
8.   components: { 
9.     VueLoadingButton, 
10.   } 
11. } 
12. </script> 

6. TB Skeleton

 

github 地址：https://github.com/anthinkingcoder/tb-skeleton

TBSkeleton 的体验是非常好的。但是，这需要相当繁琐的代码，也要合理的规划元素。

我认为理解这一点的最好方法就是写个例子。

首先，使用npm install --save tb-skeleton安装。然后，将下面内容添加到src/main.js文件中。

1. import skeleton from 'tb-skeleton' 
2. import  'tb-skeleton/dist/skeleton.css' 
3. Vue.use(skeleton) 

下面是 TBSkeleton 文档中的骨架组件示例。

1. <template> 
2.   <div> 
3.     <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc"> 
4.      <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" bg-color="#eee"></tb-skeleton> 
5.      <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton> 
6.      <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton> 
7.    </skeleton> 
8.   </div> 
9. </template> 
10. <script> 
11.   import {TbSkeleton,Skeleton} from 'tb-skeleton' 
12.   export default { 
13.     components: { 
14.       TbSkeleton, 
15.       Skeleton 
16.     } 
17.   } 
18. </script> 

如上所见，如果要使用这个库，需要一些时间成本，但在一些需要用户体验极好的需求里，可以使用它。

~ 完，我是刷碗智，去刷碗咯了，下期见~

作者：Matt Maribojoc 译者：前端小智 来源：stackabuse

原文：https://learnv.co/2020/02/6-vue-loader-animaon-libraries-to-reduce-your-bou

原文链接：https://mp.weixin.qq.com/s/95M4pEnNyBmHZTmWzUSa-g