TypingDots
typing-dots打字指示 · 三点交错弹跳(纯CSS·RSC) + reduced-motion停 + role=status·配 ChatMessage loading
用法
基础用法
三点交错弹跳的「正在输入」指示（纯 CSS·reduced-motion 自动停跳，role=status 读屏播报）。
tsx
<TypingDots />气泡内
放进 surface 气泡里，等价 ChatMessage loading 态的生成中占位。
tsx
<span className="inline-flex rounded-[var(--radius)] bg-surface px-3.5 py-2.5">
<TypingDots />
</span>无障碍标签
label 覆盖读屏播报文案（默认「正在输入」）。
tsx
<TypingDots label="瑚琏 AI 正在思考" />何时用
「对方/agent 正在输入」的三点弹跳指示。气泡内的生成态通常直接用 ChatMessage 的 loading 即可（内部就是它）；需要在自定义容器里单放时才直接用本组件。
导入
ts
import { TypingDots } from "@hulianui/ui"Props
继承 HTMLAttributes<HTMLSpanElement>（含 className 等）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| label | string | "正在输入" | 无障碍标签（读屏播报，role=status） |
禁忌 / 坑
- 纯 CSS 动画，已响应
prefers-reduced-motion（用户关动效时三点停止跳动）；无需自己加判断。
相关
Conversation · ChatMessage · PromptInput · ThinkingBlock · ToolCall · AgentPlan
Playground
<TypingDots />