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

スケルトンプレースホルダーの読み込み中リスト

アバターとテキストの位置にグレーのブロックを並べた読み込み中リストの静止見本です。データ取得前の画面をあらかじめ想定しレイアウト確認するのに役立ちます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-06-frame">
          <div class="d11-11-06-row"><span class="d11-11-06-sk d11-11-06-av"></span><div class="d11-11-06-lines"><span class="d11-11-06-sk"></span><span class="d11-11-06-sk short"></span></div></div>
          <div class="d11-11-06-row"><span class="d11-11-06-sk d11-11-06-av"></span><div class="d11-11-06-lines"><span class="d11-11-06-sk"></span><span class="d11-11-06-sk short"></span></div></div>
          <div class="d11-11-06-row"><span class="d11-11-06-sk d11-11-06-av"></span><div class="d11-11-06-lines"><span class="d11-11-06-sk"></span><span class="d11-11-06-sk short"></span></div></div>
        </div>

CSS

.d11-11-06-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; padding:16px 14px; display:flex; flex-direction:column; gap:16px; }
        .d11-11-06-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-06-sk{ background:linear-gradient(90deg,#eef0f3,#e2e5ea 45%,#eef0f3); border-radius:5px; display:block; }
        .d11-11-06-av{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; }
        .d11-11-06-lines{ flex:1; display:flex; flex-direction:column; gap:6px; }
        .d11-11-06-lines .d11-11-06-sk{ height:9px; width:100%; }
        .d11-11-06-lines .d11-11-06-sk.short{ width:50%; }

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