组件
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 | 头像 / 卡片块 |