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

AI思考中インジケーター

「考え中…」の文字と波打つ3つのドットでAIが処理中であることを伝える表示。応答待ちのローディングに最適です。

autocss

プレビュー

ソースコード

HTML

<div class="d10-06-02-box">
          <span class="d10-06-02-badge">AI</span>
          <div class="d10-06-02-bubble">考え中<span class="d10-06-02-dots"><i></i><i></i><i></i></span></div>
        </div>

CSS

.d10-06-02 .d10-06-02-box{display:flex;align-items:center;gap:10px}
        .d10-06-02 .d10-06-02-badge{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        .d10-06-02 .d10-06-02-bubble{background:#f1f2f6;border-radius:16px;padding:10px 16px;font-size:13px;color:#4b5563;display:flex;align-items:center}
        .d10-06-02 .d10-06-02-dots{display:inline-flex;gap:3px;margin-left:6px}
        .d10-06-02 .d10-06-02-dots i{width:5px;height:5px;border-radius:50%;background:#9ca3af;display:inline-block;animation:d552Wave 1.2s ease-in-out infinite}
        .d10-06-02 .d10-06-02-dots i:nth-child(2){animation-delay:.15s}
        .d10-06-02 .d10-06-02-dots i:nth-child(3){animation-delay:.3s}
        @keyframes d552Wave{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

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