组件

Placeholder 骨架占位

骨架屏占位块；pvs-skeleton 组合列表/媒体/表格布局。

Pulse

<div class="pvs-stack pvs-gap-3" style="max-width:18rem">
  <span class="pvs-placeholder pvs-placeholder--heading">
  </span>
  <span class="pvs-placeholder pvs-placeholder--text">
  </span>
  <span class="pvs-placeholder pvs-placeholder--text-sm">
  </span>
  <span class="pvs-placeholder pvs-placeholder--btn">
  </span>
</div>

Glow

pvs-placeholder--glow 扫光动画变体。

<div class="pvs-stack pvs-gap-3" style="max-width:18rem">
  <span class="pvs-placeholder pvs-placeholder--glow pvs-placeholder--heading">
  </span>
  <span class="pvs-placeholder pvs-placeholder--glow pvs-placeholder--text">
  </span>
</div>

Card skeleton

<div style="max-width:14rem">
  <span class="pvs-placeholder pvs-placeholder--avatar pvs-mb-3">
  </span>
  <span class="pvs-placeholder pvs-placeholder--card">
  </span>
</div>

Media row

pvs-skeleton--media 头像 + 两行文字。

<div class="pvs-skeleton pvs-skeleton--media" style="max-width:18rem">
  <span class="pvs-placeholder pvs-placeholder--avatar">
  </span>
  <div class="pvs-skeleton__body">
    <span class="pvs-placeholder pvs-placeholder--heading">
    </span>
    <span class="pvs-placeholder pvs-placeholder--text-sm">
    </span>
  </div>
</div>

List skeleton

<ul class="pvs-skeleton-list" style="max-width:18rem">
  <li class="pvs-skeleton-list__item">
    <span class="pvs-placeholder pvs-placeholder--avatar">
    </span>
    <span class="pvs-placeholder pvs-placeholder--text">
    </span>
  </li>
  <li class="pvs-skeleton-list__item">
    <span class="pvs-placeholder pvs-placeholder--avatar">
    </span>
    <span class="pvs-placeholder pvs-placeholder--text-sm">
    </span>
  </li>
</ul>

Table skeleton

<table class="pvs-skeleton-table" style="max-width:20rem">
  <tbody>
    <tr>
      <td>
        <span class="pvs-placeholder pvs-placeholder--table-cell">
        </span>
      </td>
      <td>
        <span class="pvs-placeholder pvs-placeholder--table-cell" style="width:60%">
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="pvs-placeholder pvs-placeholder--table-cell">
        </span>
      </td>
      <td>
        <span class="pvs-placeholder pvs-placeholder--table-cell" style="width:75%">
        </span>
      </td>
    </tr>
  </tbody>
</table>

类名速查

类名	说明
`pvs-placeholder`	根类（脉冲）
`pvs-placeholder--glow`	扫光动画
`pvs-skeleton / --media`	组合骨架
`pvs-skeleton-list`	列表行骨架
`pvs-skeleton-table`	表格行骨架
`pvs-placeholder--avatar / --card`	头像 / 卡片块