Skeleton 骨架屏
v2.0.5+

骨架屏是一种加载占位组件，在数据加载期间展示页面轮廓，减少用户等待焦虑。纯 CSS 实现，无需 JS。

基础形状

  • Preview
  • Code

文本行

标题

头像 & 按钮 & 图片

<!-- 文本行 -->
<div class="bny-skeleton bny-skeleton-text"></div>
<div class="bny-skeleton bny-skeleton-text short"></div>

<!-- 标题 -->
<div class="bny-skeleton bny-skeleton-title"></div>

<!-- 头像 -->
<div class="bny-skeleton bny-skeleton-avatar bny-skeleton-circle"></div>
<div class="bny-skeleton bny-skeleton-avatar bny-skeleton-circle lg"></div>

<!-- 按钮 -->
<div class="bny-skeleton bny-skeleton-button"></div>
<div class="bny-skeleton bny-skeleton-button lg"></div>

<!-- 图片 -->
<div class="bny-skeleton bny-skeleton-image"></div>

组合布局

  • Preview
  • Code

文章段落

列表项

<!-- 文章段落 -->
<div class="bny-skeleton-paragraph">
    <div class="bny-skeleton bny-skeleton-title"></div>
    <div class="bny-skeleton bny-skeleton-text"></div>
    <div class="bny-skeleton bny-skeleton-text"></div>
    <div class="bny-skeleton bny-skeleton-text short"></div>
</div>

<!-- 列表项 -->
<div class="bny-skeleton-list">
    <div class="bny-skeleton bny-skeleton-avatar bny-skeleton-circle sm"></div>
    <div>...</div>
</div>

卡片 & 表格
v2.0.6+

  • Preview
  • Code

卡片骨架

表格骨架

<!-- 卡片骨架 -->
<div class="bny-skeleton-card">
    <div class="bny-skeleton bny-skeleton-image"></div>
    <div class="bny-skeleton bny-skeleton-title"></div>
    <div class="bny-skeleton bny-skeleton-text"></div>
    <div class="bny-skeleton bny-skeleton-text short"></div>
</div>

<!-- 表格骨架 -->
<div class="bny-skeleton-table">
    <div class="row header">...</div>
    <div class="row">...</div>
</div>

静默模式

  • Preview
  • Code

添加 .quiet 类关闭流光，仅保留呼吸脉冲效果，适合放在卡片等静态背景上。

<!-- 静默模式（无流光，仅呼吸脉冲） -->
<div class="bny-skeleton bny-skeleton-text quiet"></div>
<div class="bny-skeleton bny-skeleton-title quiet"></div>

配合 HTMX 使用

  • Preview
  • Code

点击按钮加载内容：先在容器中放置骨架屏，hx-get 返回真实内容后自动替换。

带 hx-indicator 的段落加载：初始显示骨架屏，请求期间自动切换。 

<!-- 骨架屏作为初始占位 -->
<div id="target">
    <div class="bny-skeleton-card">
        <div class="bny-skeleton bny-skeleton-image"></div>
        <div class="bny-skeleton bny-skeleton-title"></div>
        <div class="bny-skeleton bny-skeleton-text"></div>
    </div>
</div>

<!-- 点击按钮，用真实内容替换骨架屏 -->
<button class="bny-btn" hx-get="/data/card.html"
    hx-target="#target" hx-swap="innerHTML">
    加载内容
</button>

<!-- 配合 hx-indicator 的用法 -->
<button class="bny-btn" hx-get="/data/content.html"
    hx-target="#demo" hx-swap="innerHTML"
    hx-indicator="#loading">
    加载内容
</button>
<div id="demo">
    <div id="loading" class="bny-skeleton-paragraph">
        <div class="bny-skeleton bny-skeleton-title"></div>
        <div class="bny-skeleton bny-skeleton-text"></div>
    </div>
</div>

扩展组合布局

  • Preview
  • Code

详情页

评论

表单

导航条

个人资料卡片

网格卡片

<!-- 详情页骨架 -->
<div class="bny-skeleton-detail">
    <div class="row">
        <div class="bny-skeleton label"></div>
        <div class="bny-skeleton value"></div>
    </div>
</div>

<!-- 评论骨架 -->
<div class="bny-skeleton-comment">
    <div class="bny-skeleton bny-skeleton-avatar bny-skeleton-circle sm"></div>
    <div class="body">
        <div class="bny-skeleton name"></div>
        <div class="bny-skeleton line"></div>
    </div>
</div>

<!-- 表单骨架 -->
<div class="bny-skeleton-form">
    <div class="form-row">
        <div class="bny-skeleton label"></div>
        <div class="bny-skeleton input"></div>
    </div>
</div>

<!-- 导航条骨架 -->
<div class="bny-skeleton-navbar">
    <div class="bny-skeleton logo"></div>
    <div class="menu"><div class="bny-skeleton item"></div></div>
</div>

<!-- 个人资料卡片骨架 -->
<div class="bny-skeleton-profile">...</div>

<!-- 网格卡片骨架 -->
<div class="bny-skeleton-grid">
    <div class="bny-skeleton-card">...</div>
</div>

API

CSS 类

类名 说明
bny-skeleton 基础骨架，必须配合形状类使用
bny-skeleton-text 文本行，可加 .short 变短行
bny-skeleton-title 标题，默认 45% 宽
bny-skeleton-avatar 头像方块，配合 .bny-skeleton-circle 变圆，可选 .sm/.lg/.xs
bny-skeleton-image 图片占位，100% 宽、160px 高
bny-skeleton-button 按钮占位，可选 .sm/.lg
bny-skeleton-paragraph 组合：标题 + 三行文本
bny-skeleton-list 组合：小头像 + 两行文本
bny-skeleton-card 组合：图片 + 标题 + 文本
bny-skeleton-table 组合：表头 + 多行
bny-skeleton-detail 组合：详情页标签 + 值的两栏布局
bny-skeleton-comment 组合：评论（头像 + 名称 + 内容）
bny-skeleton-form 组合：表单（label + input 多行）
bny-skeleton-navbar 组合：导航条（logo + 菜单 + 操作）
bny-skeleton-profile 组合：个人资料卡片
bny-skeleton-grid 组合：多列网格卡片
.quiet 静默模式，关闭流光仅保留呼吸脉冲