6 个可降低跳出率的 Vue Loader 动画库

妖狐艹你老母 2022-09-08 11:33 133阅读 0赞

![a6d389907939ed21cf812aa9bfcd84ef.png][]

英文 | https://learnvue.co/2020/02/6-vue-loader-animation-libraries-to-reduce-your-bounce-rate/

翻译 | 小爱

没有人喜欢等待加载。看看谷歌 2017 年的数据，就可以找到相关的加载时间和跳出率。

![17a9e39e70135b7b46ef7f4e23066210.png][]

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

无论是包含微调动画还是添加实际进度条，提供漂亮的视觉元素都可以提高你网站的性能（并使访问者更快乐）。

对于 Vue 开发人员来说幸运的是，你可以在几分钟内将大量惊人的加载程序库添加到你的项目中。

在本文中，我们将分享6个我个人比较喜欢的动画库。

准备好了吗？我们开始吧。

## **1、Vue 简单微调器** ##

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

顾名思义，这是一个非常简单的组件，但它非常强大。Vue Simple Spinner 提供了一个可定制的微调元素。使用 props，我们可以控制我们的微调器：

*  尺寸
 *  背景色和前景色
 *  速度
 *  标签文字
 *  更多…

只需几行，我们就可以在我们的项目中添加一个微调器。首先，我们可以在命令行中安装库npm install vue-simple-spinner --save.

然后，我们将它导入到我们的组件中，在我们的模板中声明它，并可以很容易的更改我们想要的任何prop。

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

就像那样，我们应该有我们的第一个微调器。

![be4c1a8ff7d01f251ef5fa2c4a3b28fd.gif][]

## **2. Vue 径向进度** ##

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

如果你正在寻找实际的进度条而不是微调动画，Vue Radial Progress 是一个很棒的库。

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

凭借流畅的动画、可自定义的功能和基于 SVG 的填充系统，当你拥有具有多个离散步骤的异步过程时，该库非常强大。

实施起来也是轻而易举的。

首先，只需使用npm install --save vue-radial-progress. 然后，这是文档中的示例组件。

如你所见，主要prop大小、完成的步骤和步骤总数，非常简单。

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

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

![5e7ff128194495d3b4180198ec655baa.gif][]

## **3、Vue加载叠加** ##

GitHub地址：https://github.com/ankurk91/vue-loading-overlay

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

我觉得这个库的一大特点是你可以允许用户在点击时取消加载覆盖。这将关闭覆盖并触发一个事件，你可以使用该事件取消正在运行的任何任务。

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

要将其添加到你的项目中，请运行 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>

![78a6454ab4865b8d022fb99d9c34b428.gif][]

## **4、Vue 进度路径** ##

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',
    })

现在，让我们看看如何向我们的组件添加进度路径。

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

这个库的另一个令人惊奇的地方是它很容易定制。不必强迫你处理prop来自定义外观，你只需编写 CSS 代码来编辑样式即可。

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

![9d247190f4a2092d5989bc112f7c85b0.gif][]

## **5、Vue 加载按钮** ##

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

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

它所做的只是在单击按钮时向按钮添加微调动画。但是通过流畅的动画，它可以创建无缝的外观，让你的网站流行起来。

设置起来非常快。

首先，使用 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。你还可以添加自定义样式以使其适合你的应用程序。

![4260171c35db83e835467976a55087e5.gif][]

## **6、 TB Skeleton** ##

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

TBSkeleton是提供速度错觉的好方法。

Linkedin 的这个屏幕截图就是一个很好的TBSkeleton加载示例。

![1c3ff669895e9aa353136a2ba1ed54ff.png][]

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

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

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

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

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>

如你所见，如果你将其添加到更复杂的组件中，肯定需要付出一些努力，但我认为这绝对值得付出努力。

**总结**

这些只是你可以在项目中使用的数十种出色的 Vue 加载器库中的一小部分。如果你想了解更多信息，我绝对建议你查看awesome-vue Github 存储库（地址：https://github.com/vuejs/awesome-vue）。

如果你没有找到适合你需求的任何东西，请自行构建并分享它！我相信其他人也会发现你的分享对他有帮助。

感谢你的阅读，祝编程愉快！

#  #

**学习更多技能**

**请点击下方公众号**

![74ef9e41d756e8b1e7063762c4fd2a63.gif][]

![4878485cd5855d1314f240d40c57c0fe.png][]

![a10eda737b198cfa9bb8cd099674cda3.png][]

[a6d389907939ed21cf812aa9bfcd84ef.png]: /images/20220829/3afc0e756bc1411d8a8317961e44a1be.png
[17a9e39e70135b7b46ef7f4e23066210.png]: /images/20220829/4fb872bdea3749efafbc3a2d8cc292ac.png
[be4c1a8ff7d01f251ef5fa2c4a3b28fd.gif]: /images/20220829/68d00a2bb59f45d3a7d6300098e5d358.png
[5e7ff128194495d3b4180198ec655baa.gif]: /images/20220829/c53690d491834bda816c9634a7cac723.png
[78a6454ab4865b8d022fb99d9c34b428.gif]: /images/20220829/e38a99a062954ebda2d64dc2f4e2f7ec.png
[9d247190f4a2092d5989bc112f7c85b0.gif]: /images/20220829/5f3a7bbb8aa845e1a9647f749ff8d007.png
[4260171c35db83e835467976a55087e5.gif]: /images/20220829/908605326ea94e38806a9e782387ef9e.png
[1c3ff669895e9aa353136a2ba1ed54ff.png]: /images/20220829/74a4666765f9407286b45334204a3c3f.png
[74ef9e41d756e8b1e7063762c4fd2a63.gif]: /images/20220829/aadd67b11ac44419b4e158f1eb899630.png
[4878485cd5855d1314f240d40c57c0fe.png]: /images/20220829/1c7f3d89ce204993b9dc01e9d88a5128.png
[a10eda737b198cfa9bb8cd099674cda3.png]: /images/20220829/7b7b6ac5828c4b6caa5ce89401766323.png