6个好用的 vue 内容加载动画库

大家都不喜欢等待页面的长时间加载。看一下 Google 在 2017 年的统计数据就可以知道加载时间和跳出率的关联。

如果给你的网站添加视觉反馈很容易留住用户，因为这让他们知道你的网站正在做事并且没有失去响应，另外它也吸引了人们的注意力。

幸运的是 vue 有很多漂亮实用的载入动画库，只需要几分钟就能添加到你的项目。

1. Vue Simple Spinner

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

就像其名字所暗示的那样，这是一个非常简单的组件，但它仍然非常强大。Vue Simple Spinner 提供可定制的旋转样式的等待控件元素。使用相关的属性可以控制以下外观和行为：

尺寸
背景和前景颜色
速度
标签文本
以及更多…

只需几行代码就可以将 spinner 添加到我们的项目中。可以使用 npm install vue-simple-spinner --save 进行安装。

然后将其导入我们的组件，在模板中声明它，并修改相应的属性，超简单的。

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

这是效果：

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>

3. Vue Loading Overlay

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

Vue Loading Roplay 是全屏加载组件的完美解决方案。如果你的应用程序包含某种类型的仪表板，并且你希望等所有数据全都载入完毕，才允许用户进行操作，那么此库能帮你大忙。

这个库的一大特点是你可以允许用户在点击时取消加载覆盖。这将关闭叠加层并触发一个事件，可以用这个功能来取消正在执行的任务。

通过这个功能，你可以让用户自行决定要不要在加载任务时间过长时取消。这意味着他们不必离开当前页面。

运行 npm install --save vue-loading-overlay 将其添加到你的项目中。

下面是一个使用 Vue Loading Overlay 库的例子组件。这个组件需要一些属性来处理可见性、取消和更改显示。

<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>

4. Vue Progress Path

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

Vue Progress Path 是最流行的加载动画库之一。

通过使用 SVGS，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',
})

接着为我们的组件添加进度路径。

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

这个库很容易进行自定义。可以不必通过属性来自定义外观，只需要编写 CSS 代码来编辑样式即可。

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

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

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>

简而言之，你所要做的就是根据实际情况将 loading 这个属性的值设置为 true 或 false。另外还可以通过添加自定义样式使其更加适合你的程序。

6. TB Skeleton

Github：https://github.com/anthinkingcoder/tb-skeleton

骨架装载能够给予用户在速度上的错觉。LinkedIn 的这个截图就是一个很好的例子。

TBSKeleton 可以使你在 vue 项目中实现这种功能。创建骨架时，一般必须在唯一的骨架元素中创建不同元素的所有轮廓。下面是一个例子。

首先用 npm install --save tb-skeleton 安装。然后把下面的代码其添加到你的 Vue 项目的 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>