Skeleton Shimmer (骨架屏流光)
别称 Skeleton wave, Shimmer effect, placeholder-wave
一道亮光扫过灰色占位图形。
适用场景
内容加载占位
变体
- wave / shimmer
- text lines
- avatar + card
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“骨架屏流光”(Skeleton Shimmer)，也叫 skeleton wave 或 shimmer effect。
一道柔和的光带从左到右扫过灰色占位图形，下一次扫过前短暂停顿：流畅、不慌不忙。
占位图形要与真实布局一致，内容加载时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则显示静态占位。相似的动效
Pulse Placeholder (脉冲占位)
别称 Skeleton pulse, placeholder-glow
灰色占位块柔和地明暗变化，提示内容正在加载。
适用场景
骨架屏
在[应用位置]添加“脉冲占位”(Pulse Placeholder)，也叫 skeleton pulse。
与即将出现的内容形状一致的灰色占位块一起缓慢变亮再恢复，节奏柔和、平稳。
占位块要与真实布局一致，内容加载进来时不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。A
将鼠标悬停在上面
Shine Sweep (扫光)
别称 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
悬停时，一道斜向光带从元素的一侧扫到另一侧。
适用场景
按钮、卡片、徽章
在[应用位置]添加“扫光”(Shine Sweep)悬停效果，也叫光泽(sheen)、闪光按钮(shiny button)、悬停扫光(shine on hover)、闪光(glint)、微光(shimmer)或微光按钮(shimmer button)。
指针停在元素上时，一道柔和的斜向光带从左向右扫过元素，并在短暂停顿后重复。
光带要裁剪在元素内部，指针移开后停止；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不要播放。ABC DEFGH
Shimmer Text (流光文字)
别称 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
一道亮光反复扫过文字。
适用场景
徽章、公告胶囊标签
在[应用位置]添加“流光文字”(Shimmer Text)效果，也叫 animated shiny text 或金属流光文字(metallic shimmer text)。
一条光带从左到右顺滑地扫过文字，短暂停顿后再重复。
高光经过时文字仍要清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。Indeterminate Linear Progress (不确定进度条)
别称 Indeterminate progress bar, Buffer bar
时长未知时，一段进度条沿轨道反复滑过。
适用场景
页面顶部或卡片加载
在[应用位置]添加“不确定进度条”(Indeterminate Linear Progress)，也叫 indeterminate progress bar。
在任务时长未知期间，一小段进度条沿着轨道从一端滑到另一端，反复进行，快速而流畅。
让这一段完整地滑入并滑出轨道，使循环看不出衔接处，并为屏幕阅读器将其标记为忙碌中的进度条。Loading & Progress 中的其他动效
Top Loading Bar (顶部加载条)
别称 Page progress bar, NProgress
页面顶部的细条在跳转过程中缓慢前进，加载完成时走完全程。
适用场景
SPA 路由加载
在[应用位置]添加“顶部加载条”(Top Loading Bar)，也叫 page progress bar。
页面加载时，顶部边缘的细条先快速前冲，然后越走越慢；加载完成后迅速冲到尽头并淡出。
在加载真正完成之前绝不能走到尽头，也不要遮挡或挤动页面内容。Typing Indicator (正在输入提示)
别称 Typing dots, Chat is typing
气泡中的三个圆点轮流跳动或上浮，表示对方或 AI 正在输入。
适用场景
聊天、AI 助手
在[应用位置]添加“正在输入提示”(Typing Indicator)，也叫 typing dots。
对方输入时，小聊天气泡里的圆点依次上浮并变亮，节奏柔和、轻缓。
循环要无缝衔接，消息一到就立刻移除气泡，并为屏幕阅读器提供一段简短的状态文字来代替圆点。Bar Loader (Equalizer) (均衡器加载)
别称 Bars loader, Audio bars
几根竖条错开节奏地伸缩，像音频均衡器一样。
适用场景
加载中或正在播放的指示
在[应用位置]添加“均衡器加载”(Bar Loader (Equalizer))动画，也叫 bars loader 或 audio bars。
几根竖条像音频均衡器一样彼此错开节奏地伸缩，节奏轻快但均匀。
循环要无缝衔接，为屏幕阅读器加上状态标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。