Blur-Up Placeholder (模糊占位图)
别称 LQIP, Blur placeholder, Progressive image load
先用一张极小的模糊版图片占位，完整图片加载后逐渐变清晰。
适用场景
首屏大图、图库
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“模糊占位图”(Blur-Up Placeholder)图片加载效果，也叫 LQIP 或 blur placeholder。
先立即用一张极小、高度模糊的图片填满图片位置，完整图片加载完成后，平滑且较快地变清晰。
预先留出图片的准确尺寸，图片加载时不能引起任何位移；并裁掉模糊的边缘，不要溢出边框。相似的动效
ABCD
Blur In (模糊进入)
别称 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素从严重模糊的状态逐渐变清晰，常伴随滑入或淡入。
适用场景
标题和首屏文字的显现
在[应用位置]添加“模糊进入”(Blur In)入场动画，也叫 text focus in、focus in 或 blur text reveal。
内容从严重模糊且透明的状态开始，在原地逐渐变清晰：柔和、偏慢，没有位移。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示清晰的文字。Skeleton Shimmer (骨架屏流光)
别称 Skeleton wave, Shimmer effect, placeholder-wave
一道亮光扫过灰色占位图形。
适用场景
内容加载占位
在[应用位置]添加“骨架屏流光”(Skeleton Shimmer)，也叫 skeleton wave 或 shimmer effect。
一道柔和的光带从左到右扫过灰色占位图形，下一次扫过前短暂停顿：流畅、不慌不忙。
占位图形要与真实布局一致，内容加载时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则显示静态占位。Pulse Placeholder (脉冲占位)
别称 Skeleton pulse, placeholder-glow
灰色占位块柔和地明暗变化，提示内容正在加载。
适用场景
骨架屏
在[应用位置]添加“脉冲占位”(Pulse Placeholder)，也叫 skeleton pulse。
与即将出现的内容形状一致的灰色占位块一起缓慢变亮再恢复，节奏柔和、平稳。
占位块要与真实布局一致，内容加载进来时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。ABCDEFGHIJKL
在里面滚动
Progressive Blur (渐进模糊)
别称 Gradient blur edge
模糊强度朝边缘逐渐增加，让内容柔和地淡出。
适用场景
滚动容器边缘、页头
在[应用位置]添加“渐进模糊”(Progressive Blur)边缘，也叫 gradient blur edge。
朝边缘滚动的内容要逐渐变得更模糊、更柔和，平滑过渡，而不是在一条生硬的线上被截断。
只在后面还有更多内容的边缘显示模糊，并且模糊区域不能挡住点击或滚动。Loading & Progress 中的其他动效
Bouncing Dots (跳动圆点)
别称 Dots loader, Ellipsis loader, Three-dot loader
一排圆点依次跳动、淡入淡出或缩放。
适用场景
行内加载、聊天等待
在[应用位置]添加“跳动圆点”(Bouncing Dots)，也叫 dots loader 或 three-dot loader。
圆点以轻快、有弹性的节奏依次跳起再落下，一轮结束后短暂停顿，再重新开始。
循环要无缝衔接，并为屏幕阅读器提供状态标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。Button Loading State (按钮加载状态)
别称 Spinner button, Loading button, Button spinner, Submit loading state
操作执行期间，按钮把文字换成一个小加载图标，或在旁边加上它。
适用场景
表单提交、异步操作
在[应用位置]添加“按钮加载状态”(Button Loading State)，也叫 spinner button 或 loading button。
按下时按钮轻轻下压，文字淡出，操作进行期间在原位置显示一个小加载图标，完成后文字再回来。
加载时保持按钮宽度不变，阻止重复点击，并向屏幕阅读器播报忙碌状态。Circular Spinner (环形加载)
别称 Spinner, Throbber, Circular indeterminate
圆环或圆弧持续旋转，表示正在加载。
适用场景
按钮、页面加载
在[应用位置]添加“环形加载”(Circular Spinner)，也叫 spinner 或 throbber。
一段圆弧沿着浅色圆环匀速旋转，同时不断伸长又缩短，流畅而连续。
旋转要无缝衔接，并为屏幕阅读器提供加载标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则放慢或停止旋转。