Loading 加载

加载图标，用于表示加载中的过渡状态。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

加载类型

支持 circular（圆环）、spinner（菊花）和 zq（品牌弹跳点）三种类型，默认为 circular。

<zq-loading />
<zq-loading type="spinner" />
<zq-loading type="zq" :size="80" />

自定义颜色

通过 color 属性设置加载图标的颜色。支持 CSS 变量、十六进制颜色值，以及特殊值 gray（灰色）。

<zq-loading color="var(--color-primary)" />
<zq-loading type="spinner" color="#1989fa" />
<zq-loading type="zq" :size="80" color="gray" />
<zq-loading type="zq" :size="80" color="var(--color-success)" />

自定义大小

通过 size 属性设置加载图标的大小，单位为 rpx。

<zq-loading :size="24" />
<zq-loading :size="48" />

加载文案

通过 text 属性或默认插槽设置加载文案。

<zq-loading text="加载中..." />
<zq-loading>加载中...</zq-loading>

垂直排列

通过 vertical 属性设置图标和文案垂直排列。

<zq-loading vertical text="加载中..." />
<zq-loading type="zq" :size="80" vertical text="加载中..." />

自定义文案大小

通过 text-size 属性设置文案字号，单位为 rpx。

<zq-loading text="加载中..." :text-size="24" />

API

Props

参数	说明	类型	默认值
type	加载图标类型	'circular' | 'spinner' | 'zq'	'circular'
size	加载图标大小，单位 rpx	number | string	30
color	颜色，支持 CSS 变量、十六进制、'gray'	string	''
text	加载文案	string	''
text-size	文案字号，单位 rpx	number | string	28
vertical	是否垂直排列图标和文案	boolean	false

Slots

名称	说明
default	加载文案内容，优先级高于 text 属性

主题定制

变量名	说明
--color-primary	circular 类型活动色 / zq 类型圆点默认色
--color-border	circular 类型轨道色
--color-text-placeholder	spinner 类型线条色
--color-text-secondary	文案颜色

类型说明

circular

圆环旋转加载动画，适用于通用场景。

spinner

菊花旋转加载动画，12 条线段依次淡入淡出。

zq

ZQ 品牌风格弹跳点加载动画，三个圆点依次弹跳，适合品牌场景和启动页。

• 圆点大小自动根据 size 计算（size * 0.28）
• 支持 color="gray" 显示灰色（#8e8e93）
• 弹跳动画使用 cubic-bezier(0.36, 0.07, 0.19, 0.97) 缓动