MICRO-INTERACTION
正在输入Typing Indicator
三个小圆点依次弹跳的气泡，表示对方正在输入。即时通讯里最有效的「时间填充」，比转圈更有人味。
效果预览
适合用在哪
客服/IM 对话、AI 回答生成中、协作编辑的他人状态。
容易踩的坑
- 对方停止输入后指示器仍挂着超过 10 秒，用户会一直空等。
- 每次状态切换都用 aria-live 播报，读屏用户被频繁打断。
- 气泡出现与消失时撑开消息列表，导致对话区上下跳动。
设计提示词 · Prompt
正在输入（Typing Indicator）：一个白底细描边的胶囊气泡，左下角圆角收小（border-radius:99px 99px 99px 4px）暗示是「对方说出来的」。里面三个 5.5px 圆点，间距 8px，动画 1.3s ease-in-out 无限循环：从 translateY(0) opacity:.42 到 translateY(-4.5px) opacity:1 再回位。三点用 0 / .18s / .36s 的 animation-delay 依次错开，形成波浪。整体高度控制在 32-36px。无障碍上放在 role="status" 的容器里，或给一个 sr-only 的「对方正在输入」。
Typing Indicator: a white pill bubble with a thin border, its bottom-left corner radius reduced (border-radius:99px 99px 99px 4px) to hint that it is "spoken by the other party". Inside are three 5.5px dots spaced 8px apart, animating 1.3s ease-in-out, infinite: from translateY(0) opacity:.42 to translateY(-4.5px) opacity:1 and back. Stagger the three dots with animation-delay of 0 / .18s / .36s to form a wave. Keep the overall height at 32-36px. For accessibility, place it in a role="status" container, or provide an sr-only "The other person is typing".
常见搭配
同一页面里经常和「正在输入」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="mi-typing"><i></i><i></i><i></i></div> </div>