7onicDESIGN SYSTEM

TypingIndicator

TypingIndicatorは、AIや相手が入力中であることを示すアニメーションコンポーネントです。Dots（バウンドドット）とCursor（ブリンクカーソル）の2バリアントを提供し、チャットUIやAIインターフェースに最適なローディング表現を実現します。

2
Variants
3
Sizes
3
Colors
Pure
React

Playground

Preview
dotsdefaultmuted
Variant
Size
Color
Speed
Options
<TypingIndicator />

Variants

Dots
3つのドットが順番にバウンドするアニメーション — チャットバブルに最適
Chat
Cursor
テキストカーソルのように点滅するブリンクアニメーション — AI思考中の表示に最適
AI

Sizes

sm
Dot4px
Cursor2×14px
default
Dot6px
Cursor2.5×20px
lg
Dot8px
Cursor3×26px

Features

Color

3つのカラーオプションで様々な背景・テーマに対応します。

default
primary
muted
<TypingIndicator color="default" />
<TypingIndicator color="primary" />
<TypingIndicator color="muted" />

Speed

アニメーション速度を3段階で調整できます。Dotsバリアントのみ対応。

slow
default
fast
<TypingIndicator speed="slow" />
<TypingIndicator speed="default" />
<TypingIndicator speed="fast" />

Label

showLabel propを有効にすると、アニメーションの横にラベルテキストを表示します。

AI is typing...
<TypingIndicator showLabel label="AI is typing..." />

API

Component Structure

TypingIndicator— Pure React

スタンドアロンコンポーネント。サブコンポーネントはありません。

Props

variant"dots"
"dots" | "cursor"

アニメーションスタイル（dots: バウンドドット、cursor: ブリンクカーソル）

size"default"
"sm" | "default" | "lg"

サイズ

color"muted"
"default" | "primary" | "muted"

色（default: 前景色、primary: ブランド色、muted: サブトルカラー）

speed"default"
"slow" | "default" | "fast"

アニメーション速度（Dotsバリアントのみ）

label"Typing"
string

アクセシビリティラベル（aria-label）とshowLabel時のテキスト

showLabelfalse
boolean

ラベルテキストを視覚的に表示する

classNameundefined
string

追加のCSSクラス

Anatomy

1
2
3
label
4
1
Container
Flexコンテナ（role=status + aria-live）
2
Dot
バウンドドット（×3）
3
Cursor
点滅カーソル
4
Label
オプションラベルテキスト

Best Practices

✓

推奨

  • ✓チャットUIでは相手の返信待ち中に表示する
  • ✓AIレスポンス生成中はDotsバリアントを使用する
  • ✓showLabelでスクリーンリーダー向けにラベルを補足する
✕

避けるべき

  • ✕長時間のローディングにはTypingIndicatorを使わない — Spinnerを使用する
  • ✕ページ全体のローディングに使わない — チャットUI専用
  • ✕アニメーションを止めずにバックグラウンドで動かし続けない

Accessibility

ARIA / WCAG

  • role="status" 自動付与
  • aria-label="Typing" デフォルト
  • label propでカスタムラベル
  • prefers-reduced-motion 対応済み