Skeleton

A placeholder that previews the shape of content being loaded.

<sy-skeleton>Installation guide Basic usage

Live preview

Interact with the component to see results here.

ShapeRow countWidth

Stop animation

View code

HTML

<sy-skeleton
  type="text"
  rows="3"
  width="100%"
  id="sample"
></sy-skeleton>

Usage guide

While content loads, preserve the final layout's structure and space. Switch to Empty if loading finishes without data.

Text, profiles, and images

Choose a type resembling the content: text, avatar, image, or gallery.

Buttons, tables, and trees

Use button, table, or tree for complex areas and adjust rows and width.

Examples

Loading text

Mark the area where multiple lines of text will appear.

View code

HTML

<sy-skeleton type="text" rows="4"></sy-skeleton>

Profiles and images

Shape the loading view to match the actual content.

View code

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-skeleton type="avatar"></sy-skeleton>
  <sy-skeleton type="image"></sy-skeleton>
</div>

Loading a table

Preserve the row and column structure while waiting for data.

View code

HTML

<sy-skeleton type="table" rows="4"></sy-skeleton>

Loading hierarchical data

A placeholder for a tree structure.

View code

HTML

<sy-skeleton type="tree" rows="4"></sy-skeleton>

Motion control

Stop or restart the animation as needed.

View code

HTML

<sy-skeleton
  type="text"
  rows="3"
  id="sample"
></sy-skeleton>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Stop motion</sy-button>
  <sy-button id="action-1" size="small">Restart</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.stopAnimation();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.resetAnimation();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Placeholder without animation

Enable disabled to stop the animation while preserving the loading placeholder's shape.

View code

HTML

<sy-skeleton
  type="text"
  rows="3"
  width="100%"
  disabled
  id="sample"
></sy-skeleton>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "disabled": true
  });
</script>

Feature examples

Choose a feature from 6 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Property · Disabled

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Rows

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Type

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Width

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Methods · Stop & Reset Animation

Use the example's buttons to call methods and inspect their results.

View code

HTML

Loading the example.

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-skeleton>`

Properties

Type	Default	Description
`'text' \| 'avatar' \| 'image' \| 'gallary' \| 'gallery' \| 'button' \| 'table' \| 'tree'`	`'text'`	Placeholder shape matching the actual content.
`number`	`0`	Number of rows in repeated content such as text, tables, or trees.
`string`	`'100%'`	Label area width, as a CSS length.
`boolean`	`false`	Keep the Skeleton visible while stopping only its animation.

Methods

Method	Returns	Description
	`Promise<void>`	Stop the Skeleton animation.
	`Promise<void>`	Restart the Skeleton animation.