パーツ番号 10-10-11 ・ CSSのみ

入力中インジケーター付きチャット(静止)

相手が返信を入力中であることをドットで示す表示を固定で見せるデザインです。チャットUIの状態説明資料に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="chat">
          <div class="row them">
            <span class="av">A</span>
            <div class="bub typing"><i></i><i></i><i></i></div>
          </div>
          <p class="hint">相手が入力中です…</p>
        </div>

CSS

.d10-10-11 .chat{ width:100%; display:flex; flex-direction:column; gap:8px; }
        .d10-10-11 .row{ display:flex; align-items:flex-end; gap:8px; }
        .d10-10-11 .av{ width:26px; height:26px; border-radius:50%; flex:none; background:linear-gradient(135deg,#6366f1,#a855f7); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d10-10-11 .bub.typing{ display:flex; align-items:center; gap:4px; padding:12px 15px; border-radius:14px; border-bottom-left-radius:4px; background:#f1f2f6; }
        .d10-10-11 .bub.typing i{ width:6px; height:6px; border-radius:50%; background:#9ca3af; display:block; }
        .d10-10-11 .hint{ margin:0; padding-left:34px; font-size:10.5px; color:#9ca3af; }

クラス名 .d10-10-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。