Skeleton 骨架屏

内容加载出来之前，按内容的大致形状摆一块会呼吸的灰色占位，让布局提前就位，数据到了之后页面不跳动。

基础用法

尺寸全由使用方写在元素上；圆形占位把 --pt-skeleton-radius 设成 9999px。加载容器上用 aria-busy 告诉读屏「正在加载」。

<div aria-busy="true" style="display: flex; align-items: center; gap: 16px; width: 320px">
  <pt-skeleton style="flex-shrink: 0; width: 48px; height: 48px; --pt-skeleton-radius: 9999px"></pt-skeleton>
  <div style="display: flex; flex: 1; flex-direction: column; gap: 8px">
    <pt-skeleton style="width: 70%; height: 16px"></pt-skeleton>
    <pt-skeleton style="width: 40%; height: 16px"></pt-skeleton>
  </div>
</div>

尺寸与形状

pt-skeleton 没有属性，尺寸完全由使用方写在元素上 —— style="width: 240px; height: 16px"、 class="h-4 w-60" 都行，写的宽高就是看到的宽高。它是块级元素，不写宽度时占满容器， 不写高度时高度为 0，看不见。

占位	写法
一行文字	style="height: 16px"，最后一行常用 width: 60% 收短
图片 / 卡片	style="width: 240px; height: 120px"
圆形（头像）	style="width: 40px; height: 40px; --pt-skeleton-radius: 9999px"

没有 shape 属性：圆角默认 8px（--pt-radius-md），圆形就是把 --pt-skeleton-radius 设成 9999px。 变量可以设在容器上，一组占位统一生效。

无障碍

每个 pt-skeleton 都带 aria-hidden="true"，读屏跳过它们 —— 一页十几块占位各念一遍只是噪音。 「正在加载」应当在加载容器上表达：

<section aria-busy="true">
  <pt-skeleton style="height: 16px"></pt-skeleton>
  <pt-skeleton style="width: 60%; height: 16px"></pt-skeleton>
</section>

数据到了、把占位换成真实内容时，同时去掉 aria-busy。

动效

透明度脉冲，2 秒一个周期。系统开启「减少动态效果」时停住，静止的灰块照样表达「这里还没加载完」。

API

CSS 变量

变量	说明
--pt-skeleton-radius	圆角，默认取 --pt-radius-md（8px）；圆形占位设为 9999px