Skeleton & Spinner 骨架屏与加载

在内容加载时显示占位。用于表示加载状态的指示器。

骨架屏

Row({ space: 16 }) {
  SSkeleton({ boxWidth: 48, boxHeight: 48, circle: true })
  Column({ space: 8 }) {
    SSkeleton({ boxWidth: 250, boxHeight: 16 })
    SSkeleton({ boxWidth: 200, boxHeight: 16 })
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

卡片

Column({ space: 12 }) {
  SSkeleton({ boxWidth: '100%', boxHeight: 125 })   // rounded-xl via modifier if you like
  SSkeleton({ boxWidth: '80%', boxHeight: 16 })
  SSkeleton({ boxWidth: '60%', boxHeight: 16 })
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

动效

motion：'pulse'（默认）| 'shimmer' | 'none'。

SSkeleton({ boxWidth: '100%', boxHeight: 16 })                     // pulse
SSkeleton({ boxWidth: '100%', boxHeight: 16, motion: 'shimmer' })
SSkeleton({ boxWidth: '100%', boxHeight: 16, motion: 'none' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

行数与预设

lines：N；preset：'text' | 'list' | 'card'。

SSkeleton({ lines: 3 })                       // paragraph, last line shorter
SSkeleton({ preset: 'list', motion: 'shimmer' })
SSkeleton({ preset: 'card', motion: 'shimmer' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

加载指示

SSpinner()
SSpinner({ sizing: 24 })
SSpinner({ sizing: 32, color: theme.colors.mutedForeground })
SButton({ text: 'Loading…', loading: true, variant: 'outline' })
SBadge({ variant: 'secondary' }) { SSpinner({ sizing: 12 }); Text('Syncing') }

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SSkeleton

shadcn-vue 的 Skeleton：bg-accent animate-pulse rounded-md。使用 boxWidth / boxHeight 设置尺寸（之所以如此命名，是为了不与通用的 width / height 属性冲突），也可使用 modifier。circle 会将其变为完全圆角（用于头像）。

变体：motion 脉冲（默认）| shimmer（光带扫过）| none；lines 渲染由 N 行文字组成的段落（最后一行较短）；preset 取 text | list（头像 + 两行）| card（媒体 + 文字行）。

动效运行在其独立的子节点上（motion 变化时移除），并遵循 --motion-skeleton-*。

属性	类型	默认值	说明
boxWidth	Length | undefined	undefined
boxHeight	Length | undefined	undefined
circle	boolean	false
motion	SkeletonMotion SkeletonMotion = 'pulse' | 'shimmer' | 'none'	'pulse'
lines	number	0	由 N 行文字组成的段落（替代普通的方块）。
preset	SkeletonPreset | undefined SkeletonPreset = 'text' | 'list' | 'card'	undefined
modifier	AttributeModifier<ColumnAttribute>	new SparkNoopModifier<ColumnAttribute>()

插槽: 子组件（尾随闭包）

SSpinner

shadcn-vue 的 Spinner：带 animate-spin 的 loader-circle 图标（匀速、无限循环）。动效 key 为 spinner：转一圈的时间为常规时长的 5 倍（默认 1 秒）；关闭动效时图标静止显示。移除 Spinner 即可停止它（再次显示时会重新开始）。

属性	类型	默认值	说明
sizing	number	16	图标尺寸，单位 vp（size-4 即 16）。
color	ResourceColor | undefined	undefined	默认为 foreground 令牌（currentColor）。
label	ResourceStr	$r('app.string.spark_loading')	无障碍名称。