Loading 加载指示器

Loading 现在既可以作为轻量 daisyUI 动效使用，也可以像 Spin 一样包裹内容、展示描述、进度和全屏遮罩。

# Basic spin

默认就是 spinner，适合按钮旁边、空状态或局部小反馈。

# Nested content

传入 children 后会生成局部遮罩，spinning 可受控切换。

正在拉取洞察

North Star Metrics

Revenue pipeline and activation are syncing.

Live

Activation

82%

Pipeline

$48k

Latency

128ms

# Description

description 会与指示器组合，tip 仍作为别名保持。

同步中

Preparing workspace

Deploying edge cache

# Delay

delay 可以避免 100-300ms 内完成的请求闪一下。

快速请求不会立即打断用户视线，超过 delay 后才出现 loading。

# Custom indicator

indicator 可传节点，也可用函数读取 percent、size、style 等状态。

Mapping signals

Function indicator

64%

# Percent

percent 展示确定进度；auto 用于未知耗时但仍想给出推进感的场景。

Queued

18%

Uploading

58%

Almost there

92%

Auto estimate

# Fullscreen

fullscreen 会创建全屏遮罩；这个示例点击遮罩即可关闭。

打开后点击遮罩关闭，避免示例页被永久盖住。

# Semantic styling

classNames/styles 可以精确控制 root、section、indicator、description、container。

Semantic slots

44%

Container slot

The wrapped content keeps its own surface while the loader owns the overlay.

# Loading spinner

# Loading dots

# Loading ring

# Loading ball

# Loading bars

# Loading infinity

# Loading with colors

API

属性	说明	类型	默认值
`spinning`	是否显示加载态；嵌套内容时会控制遮罩和 aria-busy	`boolean`	`true`
`delay`	延迟显示加载效果，避免短请求闪烁	`number`	`0`
`description / tip`	加载说明文案，tip 作为别名	`any`	`-`
`indicator`	自定义指示器节点，也支持函数接收 percent、size、style、spinning	`any \| (info) => any`	`-`
`percent`	展示加载进度；auto 会展示自动推进的轻量进度	`number \| 'auto'`	`-`
`fullscreen`	显示全屏加载遮罩	`boolean`	`false`
`style`	支持基础动效写法；传入对象或普通 CSS 字符串时作为根元素内联样式	`'spinner' \| 'dots' \| 'ring' \| 'ball' \| 'bars' \| 'infinity' \| object \| string`	`'spinner'`
`indicatorStyle / variant / type`	显式指定 daisyUI loading 动效，优先级高于 style 字符串写法	`'spinner' \| 'dots' \| 'ring' \| 'ball' \| 'bars' \| 'infinity'`	`'spinner'`
`size`	尺寸，支持 Rue 的 xs-xl，也支持 small/middle/large 别名	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'small' \| 'middle' \| 'large'`	`'md'`
`classNames / styles`	定制 root、section、indicator、description、container 语义结构	`Record<string, string> / Record<string, object>`	`-`