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

入力中インジケータ

相手が返信を打っている「入力中…」を3点の波打つアニメで表現。WordPressのチャットボットやサポート演出のアクセントに。

chatautocssinput

プレビュー

ソースコード

HTML

<div class="d10-03-02-wrap">
          <span class="d10-03-02-av">R</span>
          <div class="d10-03-02-bub">
            <span class="d10-03-02-dot"></span>
            <span class="d10-03-02-dot"></span>
            <span class="d10-03-02-dot"></span>
          </div>
          <span class="d10-03-02-cap">入力中…</span>
        </div>

CSS

.d10-03-02 .d10-03-02-wrap{width:240px;display:flex;align-items:center;gap:8px;font-size:12px}
        .d10-03-02 .d10-03-02-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;background:linear-gradient(135deg,#a1c4fd,#c2e9fb)}
        .d10-03-02 .d10-03-02-bub{display:inline-flex;gap:5px;padding:12px 14px;background:#eef1f5;border-radius:16px;border-bottom-left-radius:4px}
        .d10-03-02 .d10-03-02-dot{width:7px;height:7px;border-radius:50%;background:#9aa4b2;animation:d272wave 1.2s infinite ease-in-out}
        .d10-03-02 .d10-03-02-dot:nth-child(2){animation-delay:.2s}
        .d10-03-02 .d10-03-02-dot:nth-child(3){animation-delay:.4s}
        .d10-03-02 .d10-03-02-cap{color:#9aa4b2;font-size:11px}
        @keyframes d272wave{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}

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