パーツ番号 09-13-12 ・ CSSのみ

チャットメッセージ吹き出し用スケルトン

左右に吹き出し形の灰色ブロックを配置したチャット画面の読み込み中プレースホルダー。問い合わせチャットやDM機能の初期表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="chat09-13-12">
          <div class="row09-13-12 left09-13-12">
            <span class="av09-13-12"></span>
            <span class="bub09-13-12 b1"></span>
          </div>
          <div class="row09-13-12 right09-13-12">
            <span class="bub09-13-12 b2"></span>
          </div>
          <div class="row09-13-12 left09-13-12">
            <span class="av09-13-12"></span>
            <span class="bub09-13-12 b3"></span>
          </div>
        </div>

CSS

.d09-13-12 .chat09-13-12{
          width:100%;
          max-width:260px;
          display:flex;
          flex-direction:column;
          gap:10px;
          font-family:sans-serif;
        }
        .d09-13-12 .row09-13-12{
          display:flex;
          align-items:flex-end;
          gap:8px;
        }
        .d09-13-12 .row09-13-12.right09-13-12{
          justify-content:flex-end;
        }
        .d09-13-12 .av09-13-12{
          flex-shrink:0;
          width:26px;
          height:26px;
          border-radius:50%;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
        }
        .d09-13-12 .bub09-13-12{
          height:30px;
          border-radius:14px;
          background:linear-gradient(135deg,#e5e9ee,#f2f4f7);
        }
        .d09-13-12 .b1{ width:62%; }
        .d09-13-12 .b2{ width:48%; background:linear-gradient(135deg,#dbe1fa,#e8ecfb); }
        .d09-13-12 .b3{ width:70%; }

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