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

阻止人们离开我们的网站的一种方法是添加视觉反馈,让他们知道我们的网页正在加载而不是坏了。 视觉反馈还吸引了人们的注意力,因此等待时间似乎比静态屏幕要短得多。 无论是添加微调动画还是添加实际进度条,提供美观的视觉元素都可以改善网站的性能,也会让访问者体验更加的好。

Posted in Vue.js onMay 18, 2021

对于Vue开发人员而言,有大量类似的库供我们使用。

在本文中,分享 6 个我的最爱。

1. Vue Simple Spinner

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

顾名思义,这是一个非常简单的组件,但功能仍然非常强大。 Vue Simple Spinner提供了可定制加载样式。 使用 props,我们可以控制对应的样式:

  • Size
  • Background and foreground colors
  • Speed
  • Label Text
  • Much more…

安装命令:

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

效果如下:

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

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>

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

3.Vue Loading Overlay

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

**Vue Loading Overlay **是全屏加载组件的理想解决方案。 例如,如果应用程序包含某种仪表板,并且要等到所有数据加载完毕后再让用户四处点击,则此库很有用。

这个库还有一个好用的特性就是加载时,用户点击遮罩,可以取消加载,并触发一个事件,我们可以使用该事件取消正在运行的任何任务。

添加此功能,可以允许用户自行决定任务何时花费太长时间来加载和退出。 这意味着他们不必离开页面。

安装命令:

npm install --save vue-loading-overlay

下面是 Loading Overlay library 使用示例:

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

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

4. Vue Progress Path

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

现在,来看看如何向组件添加进度 path 。

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

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

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>

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

6. TB Skeleton

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

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

TBSkeleton 的体验是非常好的。但是,这需要相当繁琐的代码,也要合理的规划元素。

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

首先,使用npm install --save tb-skeleton安装。 然后,将下面内容添加到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>

如上所见,如果要使用这个库,需要一些时间成本,但在一些需要用户体验极好的需求里,可以使用它。

~ 完,我是刷碗智,去刷碗咯了,下期见~


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
Vue router配置与使用分析讲解
Dec 24 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
详解vue中v-for的key唯一性
解读Vue组件注册方式
May 15 #Vue.js
如何理解Vue简单状态管理之store模式
May 15 #Vue.js
Vue如何实现组件间通信
May 15 #Vue.js
详解Vue的sync修饰符
May 15 #Vue.js
深入理解Vue的数据响应式
May 15 #Vue.js
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Python中强大的命令行库click入门教程
2016/12/26 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
交通事故协议书范文
2014/04/16 职场文书
农村党员一句话承诺
2014/05/30 职场文书
高一军训决心书
2015/02/05 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
代码解析React中setState同步和异步问题
2021/06/03 Javascript
2022年四月新番
2022/03/15 日漫
python如何查找列表中元素的位置
2022/05/30 Python