daisyUI Skeleton 骨架屏组件：加载占位动画的类名用法与源码级实现原理

daisyUI Skeleton 骨架屏组件：加载占位动画的类名用法与源码级实现原理

【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui

Skeleton（骨架屏）是 daisyUI 中用于展示组件加载状态的基础组件，在真实数据尚未到达前，用带呼吸扫光动画的占位区块预先撑起页面结构，从而避免内容突然出现造成的布局跳动。本文以 Skeleton 组件文档/components/skeleton/+page.md) 为核心，系统讲解skeleton与skeleton-text两个类的完整用法，并结合 skeleton.css 的实现源码，剖析其扫光渐变、主题配色联动、RTL 适配与无障碍降级的底层原理。

Skeleton 组件是什么、用在哪里

Skeleton 常被称作"骨架屏"或"加载占位符"，它不是一个渲染真实内容的元素，而是一个带加载动画的占位 div。在文档 frontmatter 中，其定位被准确概括为：

"Skeleton is a component that can be used to show a loading state of a component."

典型应用场景包括：

• 异步请求数据时，先渲染一个与最终卡片轮廓一致的灰色块；
• 加载评论区、用户头像、列表项时，用圆块与细长条组合模拟真实布局；
• 等待 AI/大模型生成文本时，用文字扫光效果提示"正在思考中"（本文案例示例即为此场景）。

类名一览

对应的类名元数据可在文档 frontmatter 的classnames.component与classnames.modifier字段中找到，源码实现见 skeleton.css。

基础用法：一个纯占位方块

最简单的情况下，只需给一个空元素挂上skeleton类，并用 Tailwind 的h-*/w-*工具类指定尺寸——skeleton自身不携带任何宽高，尺寸完全由你决定：

<div class="skeleton h-32 w-32"></div>

在官方文档的代码示例中，类名会写作$$skeleton（$$是"可被配置前缀替换"的占位标记，即文档站上的前缀演示）。如果项目没有配置 daisyUI 前缀，实际使用时应去掉$$，直接写skeleton；若你在 Tailwind 中配置了前缀，则将其替换为对应前缀。

使用规则（来自技能文档与官方说明）：

• skeleton本身只负责背景、圆角与动画，必须配合h-*、w-*工具类才能确定占位区域的大小，否则元素会因为没有内容而高度为 0、无法显示；
• 需要圆形占位（如头像）时，追加rounded-full；需要默认组件圆角时无需额外操作，源码中的rounded-box已提供了与主题圆角令牌一致的圆角。

实战示例一：圆形头像 + 内容（典型评论加载态）

下方结构模拟了一条"头像 + 两行昵称/文字 + 整块正文"的社交评论骨架。外层用flex与gap布局，头像使用rounded-full变成圆形，并用shrink-0防止其在 flex 容器中被压缩：

<div class="flex w-52 flex-col gap-4"> <div class="flex items-center gap-4"> <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div> <div class="flex flex-col gap-4"> <div class="skeleton h-4 w-20"></div> <div class="skeleton h-4 w-28"></div> </div> </div> <div class="skeleton h-32 w-full"></div> </div>

这段结构的关键点在于：

• 外层宽度由w-52限定，flex-col gap-4负责纵向排布与 4 个单位间距；
• 头像占位h-16 w-16与文本占位h-4 w-20 / w-28的宽高比，基本对齐真实内容渲染后的视觉节奏；
• 因为所有占位块共享同一个扫光动画且间距一致，视觉上如同一个整体在"呼吸"，观感统一。

实战示例二：矩形封面 + 多行正文（典型卡片加载态）

下面的结构模拟"封面大图 + 标题 + 两行正文"的文章卡片，是内容社区中最常见的骨架形态：

<div class="flex w-52 flex-col gap-4"> <div class="skeleton h-32 w-full"></div> <div class="skeleton h-4 w-28"></div> <div class="skeleton h-4 w-full"></div> <div class="skeleton h-4 w-full"></div> </div>

这里封面占位宽度w-full、高度h-32；标题行故意比正文行短（w-28），正文行铺满（w-full），模仿真实文字排版中的换行收缩，让骨架接近最终内容的轮廓——这正是骨架屏降低"内容突变感"的核心手法：先让用户看清即将出现什么，再平滑替换为真实内容。

实战示例三：skeleton-text 文字扫光效果

当需要为"一段即将出现的文字"预留位置（例如等待 AI 生成结果）时，使用skeleton skeleton-text组合类可以让扫光动画直接作用在文字笔画上：

<span class="skeleton skeleton-text">AI is thinking harder...</span>

此时占位区显示的不是灰色块，而是一行带有往复扫光高亮的渐变文字，视觉语义更接近"内容在生成中"。注意：skeleton-text必须与skeleton一同使用，原因见下文源码剖析——扫光的位移动画与背景尺寸均由.skeleton提供，.skeleton-text只负责把渐变"剪"进文字笔画。

源码级剖析：扫光动画是怎么实现的

所有用法背后的样式都集中在 packages/daisyui/src/components/skeleton.css。把它拆开看，可以还原骨架屏的完整工作原理。

1..skeleton的静态外观

@apply bg-base-300 rounded-box motion-reduce:[transition-duration:15s]; will-change: background-position; background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% ); background-size: 200% auto; background-position-x: -50%;

• 底色bg-base-300：取自主题色阶中较暗的一档，圆角rounded-box对应主题圆角令牌--radius-box（圆角令牌的定义见 radius.css）；
• 扫光渐变：在 105 度方向上，从透明（#0000，占 0%–40%）过渡到高亮色var(--color-base-100)（位于 50%）再回到透明（60%–100%），形成一条"亮带"；
• background-size: 200% auto与background-position-x: -50%：把渐变的横向尺寸拉大两倍并将亮带推出可视区，为动画预留位移空间。

因为高亮色是--color-base-100（主题中最亮的背景色），而底色是--color-base-300，所以骨架在浅色与深色主题中会自动呈现"底暗、亮带略亮"的相对对比，无需任何额外适配。

2.@keyframes skeleton驱动扫光往复

@keyframes skeleton { 0% { background-position: 150%; } 100% { background-position: -50%; } }

动画从横向位置150%扫到-50%，配合.skeleton上的：

animation: skeleton 1.8s ease-in-out infinite;

实现每 1.8 秒一次的往复扫光。由于背景尺寸被拉长为 200%，亮带沿 105 度方向从右上方滑向左下方，产生类似"探照灯"的扫过效果，并通过will-change: background-position提前告知浏览器该属性会变化以优化合成层。

3. RTL 方向自动反转

&:dir(rtl) { animation-direction: reverse; }

在从右向左书写的语言环境中（如阿拉伯语、希伯来语页面），扫光方向会随文字阅读方向自动反向，避免观感上"逆着阅读方向扫动"带来的违和。

4. 尊重系统"减弱动态效果"设置

动画声明被包在媒体查询中，只有当用户系统未开启减弱动态效果时才会播放：

@media (prefers-reduced-motion: no-preference) { animation: skeleton 1.8s ease-in-out infinite; ... }

也就是说，对于开启了prefers-reduced-motion: reduce的用户，扫光动画会被整体关闭，页面只呈现静态的灰色占位，符合无障碍最佳实践。

5..skeleton-text：把渐变"剪"进文字

.skeleton-text { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient( 105deg, color-mix(in oklab, var(--color-base-content) 20%, transparent) 0% 40%, var(--color-base-content) 50%, color-mix(in oklab, var(--color-base-content) 20%, transparent) 60% 100% ); }

它的原理是典型的"渐变文字扫光"：

1. 用background-clip: text（含-webkit-前缀）让背景只在文字笔画内可见；
2. 把文字颜色设为color: transparent，使笔画本身透明、只露出背景；
3. 背景渐变在"base-content的 20% 透明混合色 ↔ 完整base-content"之间往复，配合来自.skeleton的同名扫光动画，形成一条在文字上滑过的高亮带。

这里用到的color-mix(in oklab, ...)与 daisyUI 5 全链路 OKLCH 色彩体系一致，渐变端点由主题令牌--color-base-content派生，因此文字扫光在任意主题下都与正文颜色保持同源（各主题令牌的实际取值可对照 themes/light.css 或 themes/dark.css 中的--color-base-content）。

这也解释了为什么skeleton-text被定义为modifier（修饰类）：它复用了.skeleton提供的动画、background-size等基础设施，自身只负责"换肤成文字渐变"。若单独使用.skeleton-text而不带.skeleton，将因为没有动画与背景尺寸定义而退化为一段静态渐变文字。

主题联动与定制

Skeleton 不写死任何颜色，全部颜色均引用主题令牌：

因此，切换 daisyUI 的 contenteditable="false">【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui