Skip to content

Loading 加载 ​

环形旋转加载指示器。支持三档尺寸与五种语义色。

契约源:lh-ui-core/specs/loading.json · 黄金用例:lh-ui-core/cases/loading.json(5 条,已翻译为 hypium 测试)

旋转动画由 ArkUI 的 LoadingProgress 内置驱动(spec 的「旋转交由后端驱动」在本端由平台动画承担)。

尺寸 ​

三档尺寸映射到 loading.size 令牌。

9:41Loading 尺寸

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

typescript
LhLoading({ size: LhLoadingSize.Large })

色调 ​

tone 决定环色,与语义色令牌一一对应。

9:41Loading 色调

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

API ​

Props ​

属性说明类型默认值
size指示器直径,映射到 loading.size 令牌LhLoadingSizeMedium
tone环色,取对应语义色令牌LhLoadingTonePrimary

LhLoadingSize ​

值size
Smallloading.size.small(16vp)
Mediumloading.size.medium(20vp)
Largeloading.size.large(24vp)

LhLoadingTone ​

值环色
Primarycolor.primary.default
Successcolor.success.default
Warningcolor.warning.default
Dangercolor.danger.default
Infocolor.info.default

令牌对照 ​

令牌用途
loading.size.{small,medium,large}三档直径
loading.strokeWidth环描边宽度(2vp)
color.{primary,success,warning,danger,info}.default五种环色

黄金用例对照 ​

cases/loading.json 的 5 条断言与 hypium 测试的对应关系(entry/src/test/Loading.test.ets):

case id断言本地测试
medium-size-uses-medium-token中号取 medium 尺寸令牌medium_size_uses_medium_token
large-size-uses-large-token大号取 large 尺寸令牌large_size_uses_large_token
primary-tone-uses-primary-token主色调取主色令牌primary_tone_uses_primary_token
success-tone-uses-success-token成功色调取成功色令牌success_tone_uses_success_token
render-emits-ring-command渲染发射环形命令端侧无对应命令(LoadingProgress 平台组件,描边宽度见 stroke_width_uses_token)

另有暗色专项:dark_colors_come_from_dark_tokens / dimensions_are_identical_in_dark_mode。 运行:DevEco Studio 右键 entry/src/test → Run Tests。