Skeleton & Spinner

Use to show a placeholder while content is loading. An indicator that can be used to show a loading state.

Skeleton

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

Approximate web preview — the HarmonyOS rendering is the reference.

Card

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

Approximate web preview — the HarmonyOS rendering is the reference.

Motion

motion: 'pulse' (default) | 'shimmer' | 'none'.

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

Approximate web preview — the HarmonyOS rendering is the reference.

Lines & presets

lines: N; preset: 'text' | 'list' | 'card'.

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

Approximate web preview — the HarmonyOS rendering is the reference.

Spinner

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') }

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SSkeleton

shadcn-vue Skeleton: bg-accent animate-pulse rounded-md. Size it with boxWidth / boxHeight (named so they do not clash with the universal width/height attributes), or with modifier. circle makes it fully rounded (avatars).

Variants: motion pulse (default) | shimmer (a highlight sweeping across) | none; lines renders a paragraph of N text lines (the last one shorter); preset text | list (avatar + two lines) | card (media + lines).

The motion runs on its own child node (removed when motion changes) and follows --motion-skeleton-*.

Prop	Type	Default	Description
boxWidth	Length | undefined	undefined
boxHeight	Length | undefined	undefined
circle	boolean	false
motion	SkeletonMotion SkeletonMotion = 'pulse' | 'shimmer' | 'none'	'pulse'
lines	number	0	Paragraph of N text lines (overrides the plain box).
preset	SkeletonPreset | undefined SkeletonPreset = 'text' | 'list' | 'card'	undefined
modifier	AttributeModifier<ColumnAttribute>	new SparkNoopModifier<ColumnAttribute>()

Slots: children (trailing closure)

SSpinner

shadcn-vue Spinner: a loader-circle icon with animate-spin (linear, infinite). Motion key spinner: one turn takes 5 × the normal duration (1 s by default); with motion off the icon is shown still. Remove the spinner to stop it (it restarts when it is shown again).

Prop	Type	Default	Description
sizing	number	16	Icon size in vp (size-4 = 16).
color	ResourceColor | undefined	undefined	Defaults to the foreground token (currentColor).
label	ResourceStr	$r('app.string.spark_loading')	Accessible name.