vue加载插件-纯css动画-内置92种效果

简介

一款vue加载动画插件,纯css效果,包含92款加载动画,可通过属性动态切换,非常的好用

使用场景

我们在做前后端分离项目时,进入页面请求数据,在数据未返回之前展示页面加载效果

 

安装

npm i u-loading --save

引入

在main,js文件内引入组件

import  uLoading  from  'u-loading'
Vue.use(uLoading);

使用

在需要使用的页面用以下标签即可使用

<uLoading></uLoading>

参数

参数 说明 类型 可选范围 默认值
type 动画模型(详见下方动画说明) Number 1~92 1
zIndex 层级 Number 1000
fixed 是否全屏,非全屏下需要给父元素position: relative; Boolean true / false true
bgColor 遮罩层颜色 String #263238
radius 遮罩层圆角 String 0px
bottom 是否位于屏幕下方 Boolean true / false false

动画说明

type值可选1~92,分别为92中动画效果,可以参照下图选择合适的动画

图片[1] - vue加载插件-纯css动画-内置92种效果 - 捕风阁

图片[2] - vue加载插件-纯css动画-内置92种效果 - 捕风阁

图片[3] - vue加载插件-纯css动画-内置92种效果 - 捕风阁

图片[4] - vue加载插件-纯css动画-内置92种效果 - 捕风阁

图片[5] - vue加载插件-纯css动画-内置92种效果 - 捕风阁

 

GitHub

https://github.com/osuuu/u-loading

 

 

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容