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

阻止人们离开我们网站的一种方法是添加视觉反馈，让他们知道我们的页面正在加载并且没有损坏。视觉反馈也能引起注意，因此等待时间似乎比静态屏幕要短得多。无论是添加微调动画还是添加实际的进度条，提供美观的视觉元素都可以提高网站的性能并改善访问者的体验。对于Vue开发人员，我们可以使用大量类似的库。在这篇文章中，我分享了我最喜欢的6个。1.VueSimpleSpinnergithub：https://dzwillia.github.io/vue-simple-spinner/examples/顾名思义，这是一个非常简单的组件，但仍然非常强大。VueSimpleSpinner提供可自定义的加载样式。使用props，我们可以控制相应的样式：SizeBackgroundandforegroundcolorsSpeedLabelTextMuchmore...安装命令：npminstallvue-simple-spinner--save。然后，导入到组件中，在模板中声明，更改Requiredprops:importRadialProgressBarfrom'vue-radial-progress'exportdefault{data(){return{completedSteps:0,totalSteps:10}},components:{RadialProgressBar}}3.VueLoadingOverlaygithub:https://github.com/ankurk91/vue-loading-overlay**VueLoadingOverlay**是全屏加载组件的理想解决方案。这个库很有用，例如，如果应用程序包含某种仪表板并等待所有数据加载后再让用户点击。这个库的另一个有用的特性是，当加载时，用户点击掩码来取消加载并触发一个事件，我们可以用它来取消任何正在运行的任务。添加此功能后，用户可以自行决定何时加载和退出任务花费的时间过长。这意味着他们不必离开页面。安装命令：npminstall--savevue-loading-overlay下面是LoadingOverlaylibrary使用示例：4.Vue进度路径github地址：https://github.com/Akryum/vue-progress-pathVueProgressPath是VueCore团队成员GuillaumeChau创建的最受欢迎的加载库之一，也是我最喜欢使用的工具之一。使用SVG，VueProgressPath创建一个有形状的进度条。它带有几个内置形状，但最强大的功能是能够传入我们自己的SVG形状——这意味着无限的可能性。使用npmi--savevue-progress-path将其添加到您的项目中，然后使用import'vue-progress-path/dist/vue-progress-path.css'importVueProgressfrom将文件全局添加到您的src/main.js文件中'vue-progress-path'Vue.use(VueProgress,{//defaultShape:'circle',})现在，让我们看看如何为组件添加进度路径。这个库还有一个非常好地方，不需要传递props来改变样式，只需要使用CSS代码来编辑样式：.vue-progress-pathpath{stroke-width:12;}.vue-progress-path.progress{stroke:红色;}5。VueLoadingButtongithub地址：https://github.com/shwilliam/vue-loading-buttonVueLoadingButton是一种向用户显示正在加载内容的简单而有效的方式。它所做的只是在单击按钮时添加一个滚轮动画。但是通过流畅的动画，它可以创造出使网站流行的无缝外观。安装：npminstall--savevue-loading-button示例：import{TbSkeleton,Skeleton}from'tb-skeleton'exportdefault{components:{TbSkeleton,Skeleton}}从上面可以看出，如果要使用这个库，需要一定的时间和成本，但是可以用在一些对用户体验要求极佳的需求中。~完了，我是智慧清洁工，我去洗碗了，下期见~作者：MattMaribojoc译者：前端小智来源：stackabuse-animaon-libraries-to-reduce-your-bou本文转载自微信公众号“大千世界”，可通过以下二维码关注。转载本文请联系大千世界公众号。