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

ゞ浴缸里的玫瑰 2023-01-20 09:34 34阅读 0赞

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

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

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

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

对于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…

安装命令：

npm install vue-simple-spinner --save.

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

<template>
       <vue-simple-spinner size="medium" />
    </template>
    <script>
    import VueSimpleSpinner from 'vue-simple-spinner'
    export default {
       components: { 
          VueSimpleSpinner
       }
    }

效果如下：

![1.gif][]

### 2. Vue Radial Progress ###

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

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

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

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

安装：

npm install --save vue-radial-progress

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

<template>
      <radial-progress-bar :diameter="200"
                           :completed-steps="completedSteps"
                           :total-steps="totalSteps">
       <p>Total steps: {
       { totalSteps }}</p>
       <p>Completed steps: {
       { completedSteps }}</p>
      </radial-progress-bar>
    </template>
    
    <script>
    import RadialProgressBar from 'vue-radial-progress'
    
    export default {
      data () {
        return {
          completedSteps: 0,
          totalSteps: 10
        }
      },
    
      components: {
        RadialProgressBar
      }
    }
    </script>

![2.gif][]

### 3.Vue Loading Overlay ###

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

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

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

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

安装命令：

npm install --save vue-loading-overlay

下面是 Loading Overlay library 使用示例：

<template>
        <div class="vld-parent">
            <loading :active.sync="isLoading" 
            :can-cancel="true" 
            :on-cancel="onCancel"
            :is-full-page="fullPage"></loading>
            
            <label><input type="checkbox" v-model="fullPage">Full page?</label>
            <button @click.prevent="doAjax">fetch Data</button>
        </div>
    </template>
    
    <script>
        // Import component
        import Loading from 'vue-loading-overlay';
        // Import stylesheet
        import 'vue-loading-overlay/dist/vue-loading.css';
        
        export default {
            data() {
                return {
                    isLoading: false,
                    fullPage: true
                }
            },
            components: {
                Loading
            },
            methods: {
                doAjax() {
                    this.isLoading = true;
                    // simulate AJAX
                    setTimeout(() => {
                      this.isLoading = false
                    },5000)
                },
                onCancel() {
                  console.log('User cancelled the loader.')
                }
            }
        }
    </script>

![image.png][]

### 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`文件中。

import 'vue-progress-path/dist/vue-progress-path.css'
    import VueProgress from 'vue-progress-path'
    
    Vue.use(VueProgress, {
      // defaultShape: 'circle',
    })

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

<loading-progress
      :progress="progress"
      :indeterminate="indeterminate"
      :counter-clockwise="counterClockwise"
      :hide-background="hideBackground"
      shape="semicircle"
      size="64"
    />

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

.vue-progress-path path {
      stroke-width: 12;
    }
    
    .vue-progress-path .progress {
      stroke: red;
    }

![4.gif][]

### 5. Vue Loading Button ###

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

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

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

安装：

npm install --save vue-loading-button

示例：

<template>
       <VueLoadingButton aria-label='Send message' />
    </template>
    <script>
    import VueLoadingButton from 'vue-loading-button'
    
    export default {
      components: {
        VueLoadingButton,
      }
    }
    </script>

![5.gif][]

### 6. TB Skeleton ###

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

![6.png][]

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

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

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

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

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

<template>
      <div>
        <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc">
         <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" bg-color="#eee"></tb-skeleton>
         <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
         <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
       </skeleton>
      </div>
    </template>
    <script>
      import {TbSkeleton,Skeleton} from 'tb-skeleton'
      export default {
        components: {
          TbSkeleton,
          Skeleton
        }
      }
    </script>

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

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

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

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

### 交流 ###

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[1.gif]: /images/20221021/587866808c6a427fb21c5192237516d1.png
[2.gif]: /images/20221021/d7a1d724e6eb44abbe90c513a58d4f4f.png
[image.png]: /images/20221021/3da9a73a8bbc4c66baf9e4ec22b55e23.png
[4.gif]: /images/20221021/ef820ccce88f4438b32a2d2e2628d550.png
[5.gif]: /images/20221021/9d40589609524eef9984191713419077.png
[6.png]: /images/20221021/bcebfdd7c0b248a4b5af92e8e73b6e7a.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi