【工具】1061- 6 个可降低跳出率的 Vue Loader 动画库

水深无声 2022-09-09 11:59 118阅读 0赞

![d6ea399f14eb0cf457aec6275e415583.png][]

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

翻译 | 小爱

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

![04f65992093fcb6557d74bc343bb4bdb.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
       }
    }

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

![7cee33648b3f9bbcafdc48378d6099bd.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>

![846cb15b8e82964b03184d242457c273.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>

![6579b5405fe49c01aea6839ae6dfcf40.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;
    }

![6ee8ea4df3e557b3f6faf0d88a7a8f44.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。你还可以添加自定义样式以使其适合你的应用程序。

![a5d0816ae0a504c82c42c6f601e139ce.gif][]

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

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

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

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

![d2763f41a35ca83f47cf678a1a64dfb8.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）。

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

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

![6fdd9600c8c6aec638d7b5bed8c22d02.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![2260254a9eb53c5f2dc673c419f1ba0d.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[d6ea399f14eb0cf457aec6275e415583.png]: /images/20220829/c18b0fb15de54735b9c79fa2604dc86e.png
[04f65992093fcb6557d74bc343bb4bdb.png]: /images/20220829/fdc5bfbf4e0c4b5a9a416b9fa196f150.png
[7cee33648b3f9bbcafdc48378d6099bd.gif]: /images/20220829/943f7530929347a59b0a173185f003ff.png
[846cb15b8e82964b03184d242457c273.gif]: /images/20220829/72a6a497368d44bbabd731952e51bce5.png
[6579b5405fe49c01aea6839ae6dfcf40.gif]: /images/20220829/5aa0b8b084e54842b5fd0eb145b2dd10.png
[6ee8ea4df3e557b3f6faf0d88a7a8f44.gif]: /images/20220829/cb5ba40752ea47498a106c4e4a538ea9.png
[a5d0816ae0a504c82c42c6f601e139ce.gif]: /images/20220829/90f299d56dea48c09d0f2ca726c2ab9b.png
[d2763f41a35ca83f47cf678a1a64dfb8.png]: /images/20220829/c391f032bb614b1fa6867e9bec942608.png
[6fdd9600c8c6aec638d7b5bed8c22d02.gif]: /images/20220829/7cb0b5b8f8fb4ccb8b5e98935f7fc686.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[2260254a9eb53c5f2dc673c419f1ba0d.gif]: /images/20220829/787a5c62e1c64efc9a82ac10e812a43b.png