Skeleton

Skeleton is a quiet placeholder while content loads. The shimmer is neutral gray, not a brand sweep.

Demos

Text rows

rows sets the line count. The last line is about 62% wide. With no shape props, text rows are the default.

<gk-skeleton text rows="4"></gk-skeleton>

Avatar and text

The avatar bone is a 40px circle with a 12px gap before the lines.

<gk-skeleton avatar text rows="3"></gk-skeleton>

Button, image, animation off

Button bones match Button md (34×96). animated="false" is a flat gray block. Set --gk-skeleton-highlight only if an app wants a different sweep; the default highlight is white at 55% and is not brand tinted.

Left: shimmer. Right: static.

<gk-skeleton button></gk-skeleton>
<gk-skeleton button animated="false"></gk-skeleton>
<gk-skeleton image></gk-skeleton>

Loading false

loading="false" unmounts the bones and shows the default slot. prefers-reduced-motion: reduce turns the sweep off.

知

Knowledge card

The default slot is the real content.

Show content

<gk-skeleton :loading="loading" image avatar text rows="2" height="100">
  <article>Real card</article>
</gk-skeleton>

Repeat

repeat duplicates the whole placeholder block. Each text group still shortens its last line.

<gk-skeleton avatar text rows="2" repeat="3"></gk-skeleton>

Template slot

Put a custom layout in the template slot. It replaces the built-in bones while loading is true.

Loaded copy.

<gk-skeleton>
  <div slot="template"><!-- custom bones while loading --></div>
  <p>Loaded copy.</p>
</gk-skeleton>

API

Skeleton Props

Prop	Type	Default
loading	boolean	true
animated	boolean	true
repeat	number	1
text	boolean	false (text rows are used when no other shape is set)
rows	number	3
avatar	boolean	false
button	boolean	false
image	boolean	false
round	boolean	false
sharp	boolean	false
width / height	string | number	—

Combine image, avatar, and text for a card placeholder. width and height size the image, button, or plain rectangle. height="100" is 100px.

Skeleton Slots

Name	Description
default	Real content, shown when loading is false
template	Custom placeholder, shown instead of built-in bones while loading

CSS Parts

Part	Description
root	Block wrapper
content	Default slot container
avatar / text / line / button / image	Shape bones
bone	Every placeholder block

CSS variables

Variable	Default
--gk-skeleton-base	rgba(46, 51, 56, 0.07)
--gk-skeleton-highlight	rgba(255, 255, 255, 0.55)

Accessibility

• While loading, the host sets aria-busy="true" and a visually hidden “Loading” / 「載入中」.
• Bones are aria-hidden="true".
• When loading finishes, busy is cleared and the bones are unmounted.