Loading 加载

轻量级高阶加载指示器组件，支持 ring（圆环）、spinner（iOS 菊花）、bento（冰晶方块）、orbit（双轨流光）、wave（声波律动）与 dots（三点弹跳）6 种精工动画形态，全量适配全端与暗黑自适应视效。

---

代码示例

1. 动画形态 (6 Animation Types)

通过 type 属性设定加载图标样式。

<template>
  <view class="demo-row">
    <mu-loading type="ring" text="Ring 圆环" />
    <mu-loading type="spinner" text="Spinner 菊花" />
    <mu-loading type="bento" text="Bento 冰晶" />
    <mu-loading type="orbit" text="Orbit 流光" />
    <mu-loading type="wave" text="Wave 声波" />
    <mu-loading type="dots" text="Dots 弹跳" />
  </view>
</template>

---

2. 自定义色彩与尺寸 (Color & Size)

通过 color 与 size 自定义图标颜色及尺寸（单位支持 rpx 或 px）。

<template>
  <mu-loading type="ring" :size="32" color="#10B981" text="成功绿" />
  <mu-loading type="spinner" :size="36" color="#3B82F6" text="信息蓝" />
  <mu-loading type="orbit" :size="48" color="#8B5CF6" text="极奢紫" />
</template>

---

3. 垂直排版 (Vertical Layout)

设置 vertical 属性使加载图标居中置顶，下方排列提示文案。

<template>
  <view class="card">
    <mu-loading type="orbit" :size="48" color="#171717" text="数据加载中..." vertical />
  </view>
</template>

---

4. 全屏模态加载 (Fullscreen Loading)

设置 fullScreen 属性在全屏弹出带高斯模糊的 Loading 遮罩层。

<template>
  <mu-loading v-if="isLoading" full-screen type="orbit" :size="60" text="正在安全加载全量资源..." />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
type	加载动画形态	String	ring | spinner | bento | orbit | wave | dots	'ring'
size	图标尺寸大小	Number | String	-	36 (支持 '40rpx', '24px')
color	加载图标色彩	String	-	'#171717' (自适应暗黑模式)
text	提示文本内容	String	-	''
textColor	提示文本颜色（留空默认继承 color）	String	-	''
vertical	是否开启图标与文字垂直居中排版	Boolean	true | false	false
fullScreen	是否开启全屏高斯模糊加载遮罩	Boolean	true | false	false
bgColor	全屏模式下的遮罩背景色	String	-	'rgba(255, 255, 255, 0.88)'
marginRight	右侧外边距 (rpx)	Number | String	-	0

---

插槽说明 (Slots)

插槽名	说明
default	自定义加载内部内容插槽