Shimmer Skeleton

Gray blocks hold the layout while data loads, swept by a passing sheen

All platformsMotion & BackgroundsContent areaEffect

Live preview (drag the parameters, watch it change)

Shimmer speed 1.6s Sheen width 40% Radius 8px

Code

<div class="skeleton"></div>
<style>
.skeleton {
  position: relative; overflow: hidden;
  background: #E3E0D8; border-radius: 8px; min-height: 14px;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
</style>

<div class="relative min-h-[14px] overflow-hidden rounded-[8px] bg-[#E3E0D8] after:absolute after:inset-0 after:w-[40%] after:-translate-x-[110%] after:animate-[shimmer_1.6s_infinite] after:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent)]"></div>
<!-- tailwind.config 补 keyframes shimmer: { to: { transform: 'translateX(290%)' } } -->

export function Skeleton({ style }) {
  return <div className="skeleton" style={style}>
    <style>{`.skeleton{position:relative;overflow:hidden;background:#E3E0D8;border-radius:8px;min-height:14px}
    .skeleton::after{content:"";position:absolute;inset:0;width:40%;transform:translateX(-110%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:shimmer 1.6s infinite}
    @keyframes shimmer{to{transform:translateX(290%)}}`}</style>
  </div>;
}

Code snippets are MIT-licensed — copy and adapt freely.

How this effect works

它是怎么工作的（中文）

骨架块就是和真实内容同尺寸的灰色圆角块；微光是一条斜向的白色渐变伪元素，从左扫到右无限循环。骨架的价值在布局稳定：内容到了不跳版。它只适合「结构已知、内容未知」的加载，超过 1 秒还没数据就该考虑空状态或错误提示了。

How it works (English)

Skeleton blocks are gray rounded rectangles sized exactly like the real content; the sheen is a diagonal white-gradient pseudo-element sweeping left to right forever. The value is layout stability — no jump when content lands. It only suits 'structure known, content unknown' loading; past ~1s, think empty or error states instead.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

Matching prompt

Shimmer Skeleton PromptStale · →