Skeleton vs. Spinner 骨架屏 Skeleton vs. 旋转指示器 Spinner web
Two loading indicators for predictable layouts and indeterminate waits
两种加载指示器：一个给布局可预期的内容占位，一个应付时长未知的等待
Skeleton
Spinner
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Skeleton block骨架块
Skeleton“The grey shape standing in for a card or image” is a skeleton block.
「代替卡片或图片的那个灰色形状」就是骨架块。
Prompt fragmentPrompt 片段a shadcn/ui Skeleton block matching the final content's exact geometry to prevent layout shift
一个 shadcn/ui Skeleton 骨架块，与最终内容的几何结构完全一致，防止布局偏移
-
2 Skeleton text line骨架文本行
Skeleton“The fake grey line where text will appear” is a skeleton text line.
「文字位置上的那条灰色假行」就是骨架文本行。
Prompt fragmentPrompt 片段a shadcn/ui Skeleton text line with varied natural widths matching the eventual copy layout
一个 shadcn/ui Skeleton 骨架文本行，宽度错落有致，贴近最终文案的排版
-
3 Shimmer sweep微光扫过（Shimmer）
@keyframes“The little glow moving across the placeholder” is the shimmer sweep.
「在占位块上扫过去的那道小亮光」就是微光扫过动画。
Prompt fragmentPrompt 片段a subtle CSS @keyframes shimmer sweep traveling across the skeleton blocks while aria-busy remains true
一个用 CSS @keyframes 实现的微妙微光扫过动画，在 aria-busy 为 true 期间持续扫过骨架块
-
4 Spinner track and arc旋转指示器的轨道与弧段
role="status"“The faint circle and the darker bit spinning around it” are the spinner track and active arc.
「那个淡淡的圆圈和绕着它转的深色小段」就是旋转指示器的轨道和活动弧段。
Prompt fragmentPrompt 片段a role="status" indeterminate spinner with a quiet circular track and one contrasting rotating arc
一个 role="status" 的不确定进度旋转指示器：低调的圆形轨道，加一条对比鲜明的旋转弧段
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Mark the loading region aria-busy="true" and use a skeleton when the final card layout is known, preserving its geometry while data arrives. Use a spinner with role="status" when the wait has no meaningful content shape, and replace either indicator when loading completes.
把加载区域标记为 aria-busy="true"；如果最终卡片布局已知，用骨架屏（Skeleton），在等待数据期间保持原有的几何结构；如果等待过程没有明确的内容形态，用带 role="status" 的旋转指示器（Spinner）；无论哪种，加载完成后都要替换掉。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my skeleton/spinner (loading placeholders). Rule out: skeleton flashing for sub-200ms loads — add an appearance delay; the shimmer looping forever because the error state never replaces it; skeleton shapes not matching real content so the swap causes layout shift; dozens of simultaneously animating placeholders janking scroll. The symptom:
调试我的骨架屏/旋转指示器（加载占位）。排查：加载时间不到 200ms 时骨架屏一闪而过——加出现延迟；微光扫过动画（shimmer）无限循环，因为错误状态一直没替换它；骨架形状与真实内容不符，替换时造成布局偏移（layout shift）；几十个占位同时动导致滚动卡顿。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| ARIA | aria-busy="true" | |
| shadcn/ui | Skeleton | |
| ARIA | role="status" |