更新记录

1.4.1(2024-07-02)

1. 增加动画equal(等边), wobble(摇摆)

2. 原来的triangle(三角)改为surround(环绕)

3. 新增可自定义颜色项

1.4.0(2024-06-28)

增加 loading加载文字提醒配置项,默认false

1.3.2(2023-10-31)

修改遮罩默认透明度为0.1

查看更多

平台兼容性

uni-app

Vue2 Vue3
?
app-vue app-nvue app-android app-ios
? ? ? ?
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
? ? ? ? ? ? ? ? ?
微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 钉钉小程序 快手小程序 飞书小程序 京东小程序
? ? ? ? ? ? ? ? ?
快应用-华为 快应用-联盟
? ?

uni-app x

app-android app-ios
? ?
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
? ? ? ? ? ? ? ? ?

zero-loading

仅测试于 vue2, vue3, 微信小程序. 其他平台自行测试

使用方法

导入 uni_modules 后直接使用即可

提供多种加载动画类型,传入 type 改变 loading 样式,不传默认 circle

全屏使用

<zero-loading v-if="loading"></zero-loading>

局部使用

父元素的 position 记得改为 relative 不然可能影响效果

<zero-loading type="pulse" position="absolute"></zero-loading>

参数说明

参数 类型 默认值 描述
type String atom 样式
position String fixed 定位方式
zIndex Number 9
mask Boolean false 是否需要遮罩 (默认为全屏遮罩,背景色默认为黑色)
maskOpacity Number 0.1 遮罩透明度
maskMini Boolean false 传入 true 时,使用小遮罩
maskDark Boolean true 传入 false 时,遮罩背景色为白色
color String #0396FF 自定义颜色,仅部分支持
showText showText false 是否显示文字
text String 加载中... 文本内容
textSize String 28rpx 文字大小
textColor String #333333 文字颜色
textGap String 40rpx 文字与 loading 动画的间距

type 可选值:

type 值 描述
equal 等边 (自定义颜色)
wobble 摇摆 (自定义颜色)
annulus 圆环 (自定义颜色)
sword 剑气 (自定义颜色)
atom 原子 (自定义颜色)
pulse 脉冲 (自定义颜色)
circle 圆圈 (自定义颜色)
eyes 眼睛
surround 环绕
bounce 弹跳
radar 雷达
gear 齿轮
love 爱心
sun 太阳

插件预览: code

小程序搜索: zerojs 零技术

预览的小程序不一定能及时更新当前插件

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问