6 个简单实用的 Vue Loader 加载动画库

喜欢就关注我们吧

今天我要分

没有人喜欢干坐着等待页面加载。不信你看谷歌2017年公布的数据，就可以发现加载时间和网页跳出率呈现很明显的正相关关系。

防止用户离开网站的一种方法是添加可视化反馈，以便让他们知道网站只是在加载而不是坏掉了，同时还可以吸引他们的注意力，仿佛等待时间比静态屏幕短了许多。

无论是旋转动画还是实际进度条，漂亮的视觉元素往往可以改善网站的表现，使访问者更愉悦。

幸运的是，有许许多多令人惊艳的加载动画库可供Vue开发人员选择，只要几分钟就可以添加到项目中，实在方便。

本文将介绍6个我认为最赞的Vuejs加载器。一起来看看吧。

1. Vue Simple Spinner

顾名思义，这是一个非常简单的组件，但非常强大。Vue Simple Spinner提供了一个可自定义的旋转元素。我们通过props来控制微调器：

尺寸
背景色和前景色
速度
标签文字
等等等等…

只需几行代码，我们就可以在项目中添加旋转器哦。首先，在命令行中用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
   }
}

完工，我们的旋转器就搞定了。

2. Vue Radial Progress

如果你想要实际的进度条而不是旋转动画，那么请看Vue Radial Progress，这是一个很棒的库。

Vue Radial Progress允许你设置进度条中的步骤数以及用户当前所在的步骤。然后，它会根据完成的多少来填充进度条的百分比。

凭借流畅的动画、可自定义的功能和基于SVG的填充系统，这个库在遇到具有多个离散步骤的异步进程时，尤其好用。

实施起来也是轻而易举。

首先，只需使用npm install --save vue-radial-progress安装库。下面是文档中的示例组件：

如你所见，当主要props是大小、完成步骤和步骤总数时，真的非常简单。

此外，这个库使用了组件插槽，这使得你很容易就可以在圆内添加文本。

<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

Vue Loading Overlay是全屏加载组件的完美解决方案。例如，如果你的应用程序包含某种仪表板，并且你想等到所有数据都加载完毕，等到用户单击鼠标，那么这个库可能会帮上你的大忙。

我觉得这个库的一大特点是允许用户在点击时取消加载覆盖。关闭覆盖将触发这样一个事件：取消正在运行的任务。

通过添加此功能，你可以让用户自行决定当任务加载和退出时间过长时怎么做。这意味着他们不必离开页面。

要将这个库添加到项目中，运行npm install --save vue-loading-overlay即可。

接下来，还是通过示例组件来说明Vue Loading Overlay库。组件需要一些props来确定可见性、处理取消和更改显示。

<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

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

Vue Progress path通过SVG已创建了成形的进度条。不但自带内置形状，而且最强大的功能是能够传入自定义的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"
/>

这个库的另一个特点是易于自定义。不再强迫你处理props来自定义外观，你只需编写CSS代码来编辑样式即可。

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

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

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

简而言之，你所要做的就是根据情况将加载值设置为true/false。你还可以添加自定义样式以适合你的应用程序。

6. TBSkeleton

骨架屏加载是提供速度错觉设计的好方法。

下面的屏幕截图是一个很好的骨架屏加载示例。

TBSkeleton是在Vue项目中实现此功能的好方法。但是，它需要大量代码，并且需要明智地规划元素。

创建Skeleton时，你基本上必须在唯一的Skeleton元素中创建不同元素的所有轮廓。

还是通过一个例子来理解吧。

首先，使用npm install --save tb-skeleton安装。然后，通过这些代码行将其添加到Vue项目的src/main.js文件中。

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

下面是来自TBSkeleton文档的Skeleton组件示例。

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