パーツ番号 08-02-10 ・ CSSのみ

タイピングドット

チャットの「入力中…」を表す吹き出しと3点アニメ。WordPressに設置したチャットボットやお問い合わせUIの応答待ち表示に使えます。

cssinput

プレビュー

ソースコード

HTML

<div class="d08-02-10-chat">
          <div class="d08-02-10-avatar">🤖</div>
          <div class="d08-02-10-bubble">
            <span class="d08-02-10-dot"></span><span class="d08-02-10-dot"></span><span class="d08-02-10-dot"></span>
          </div>
        </div>

CSS

.d08-02-10{background:#f3f4f6}
        .d08-02-10-chat{display:flex;align-items:flex-end;gap:10px}
        .d08-02-10-avatar{
          width:38px;height:38px;border-radius:50%;background:#e0e7ff;
          display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;
        }
        .d08-02-10-bubble{
          background:#fff;border-radius:18px 18px 18px 4px;
          padding:14px 18px;display:flex;gap:6px;align-items:center;
          box-shadow:0 2px 8px rgba(0,0,0,.08);
        }
        .d08-02-10-dot{
          width:8px;height:8px;border-radius:50%;background:#9ca3af;
          animation:d08-02-10-typing 1.2s ease-in-out infinite;
        }
        .d08-02-10-dot:nth-child(2){animation-delay:.2s}
        .d08-02-10-dot:nth-child(3){animation-delay:.4s}
        @keyframes d08-02-10-typing{
          0%,60%,100%{transform:translateY(0);opacity:.4}
          30%{transform:translateY(-6px);opacity:1}
        }

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