spz-loading#

#When to Use

When a part of the page is waiting for asynchronous data or is in the process of rendering, an appropriate loading animation can effectively alleviate user anxiety.

#Code Demonstration

#Basic Usage

The simplest way of loading, directly display the loading on the page.

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

#As an Overlay

Use the has-mask attribute to indicate that the loading is only displayed as an overlay, without showing the loading indicator.

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

#Default Hidden

Use methods to show or hide.

<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>

#Attributes

#Methods

#showLoading

Display loading, no parameters needed.

#close

Hide loading, no parameters needed.

#AI Summary (LLM Ready)

• Component ID: spz-loading
• One-line purpose: For the loading state of pages and blocks.
• Detected attribute rows: 1
• Detected method subsections: 2
• Detected event subsections: 0
• Top attribute names: has-mask
• Top method names: showLoading, close
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/