微光加载
Shimmer
初级通用微光加载（Shimmer）是在骨架屏的灰色占位块上，让一道柔和的高光从左往右循环扫过。静止的灰块看不出是在加载还是坏了，加上微光就能告诉用户「内容还在路上，没卡住」。
你可能会说：「列表加载时显示的灰色方块看着像页面坏了，能不能加一道光扫过去，让人知道还在加载？」
读之前建议先了解
动手看看一道光扫过占位块
要点微光加载是怎样起作用的？
- 1
一道半透明的光在占位块上平移
做法通常是在每个灰色占位块上叠一层「透明 → 半透明白 → 透明」的线性渐变，用动画让它从左往右循环移动。动的只是 transform 或背景位置，不改布局，开销很小。所有占位块的光最好同步扫过，看起来像同一道光掠过整个列表，而不是各闪各的。
- 2
节奏要慢，亮度差要小
微光一般 1.2~2 秒扫一趟。太快（半秒一趟）整片占位就像在闪烁，看久了让人焦虑，对光敏感的人也不友好；亮度差太大同理。它表达的是「平静地在进行中」，不是催促。开启减少动效时可以停掉扫光，只保留静态的占位块。
- 3
快的别闪，慢的要说明
接口 200 毫秒就返回时，占位一闪而过，反而让屏幕跳了一下。常见做法是先等 200~300 毫秒，还没回来再显示占位。反过来，加载超过几秒时，微光只能说明「没卡住」，说明不了「还要多久」，这时要补一句文字（如「正在生成报表，约 10 秒」）或换成进度条。另外，占位块要照着真实布局画，尺寸差不多，内容出现时页面才不会跳。
容易混淆的地方
骨架屏是「占位的轮廓」，微光是加在骨架屏上的动效，没有微光的骨架屏也成立。转圈（Spinner）只表示「有东西在加载」，不交代内容长什么样，适合按钮里或结构未知的小区域；微光加骨架屏适合列表、卡片这类结构固定的内容。两者都不能告诉用户还要等多久，那是进度条的工作。
什么时候用
适合用
- 课程、商品、文章等卡片列表首次加载时，骨架屏加微光，让用户知道内容正在路上。
- 社交 App 的信息流下拉刷新后，新内容还没回来时，用带微光的占位卡片顶住位置。
- AI 工具生成回答前，在回答区域显示几行带微光的文字占位。
不适合用
- 接口通常一两百毫秒就返回时，别立刻显示带微光的占位；先等 200~300 毫秒再决定要不要显示。
- 导出报表这类要等十几秒的任务，别只靠微光让用户干等；改用进度条或写明预计时间。
- 按钮提交中的小状态，别在按钮里放骨架和微光；用按钮内的转圈和「提交中」文字。
练一练选一个答案，看看解释
你的课程列表加载时间不稳定：多数时候 0.2 秒，偶尔 2~3 秒。怎样设计加载状态最合适？
让 AI 帮你做复制给 AI Agent 直接用
请给【加载中的列表或卡片，如：课程列表页】的骨架屏加上微光加载效果。先阅读现有的加载状态组件和样式，确认是否已有骨架屏组件，以及占位和真实内容的布局差异。要求：占位块照着真实布局画，尺寸接近；在占位块上叠一道半透明渐变，1.2~2 秒从左往右扫一趟，所有占位同步，只动 transform 或背景位置；请求发出 300 毫秒内返回就不显示占位，超过 3 秒补一句文字说明。开启减少动效时停掉扫光，保留静态占位。沿用现有组件，不改无关代码。最后说明怎样把网络调慢验证：快请求不闪、慢请求有微光、内容出现时页面不跳动。