spz-loading 加载中#

#何时使用

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

#代码演示

#基本用法

最简单的加载用法，直接在页面中展示加载。

<div class="loading-wrapper">
  <spz-loading layout="container"></spz-loading>
</div>

#作为蒙层

使用 has-mask 属性来指明加载仅作为蒙层显示，不显示加载指示符。

<div class="loading-wrapper">
  <spz-loading layout="container" has-mask></spz-loading>
</div>

#默认隐藏

使用方法来显示或隐藏。

<div class="action-buttons">
  <button @tap="loading.showLoading">Show loading</button>
  <button @tap="loading.close">Close loading</button>
</div>

<div class="loading-wrapper">
  <spz-loading layout="nodisplay" hidden id="loading"></spz-loading>
</div>

#属性

#AnimationPresets可选值

fade-in

渐显效果，默认过渡时间为0.1s。

fly-in-bottom

从下方向上移动出现，默认过渡时间为0.2s。

fly-in-top

从上方向下移动出现，默认过渡时间为0.2s。

#方法

#showLoading

显示加载，不需要参数。

#close

隐藏加载，不需要参数。

#AI 摘要（LLM Ready）

• 组件标识：spz-loading
• 用途一句话：用于页面和区块的加载中状态。
• 可识别属性条目：2
• 可识别方法小节：2
• 可识别事件小节：0
• 关键属性名（Top）：has-mask、animate-in
• 关键方法名（Top）：showLoading、close
• 关键事件名（Top）：无（待补充）
• 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
• 关联文档：/guide/actions-and-events/ 、/guide/layouts/