Skeleton

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

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

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

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

<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">움직임 중지</sy-button>
  <sy-button id="action-1" size="small">다시 시작</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;
  }) ?? '완료';
  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>

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