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

スケルトンスクリーン

記事カードの骨組みにシマー(光の帯)が流れるプレースホルダー。WordPressの記事一覧をAjaxで読み込む間の表示に最適です。

autocss

プレビュー

ソースコード

HTML

<div class="d08-02-04-card">
          <div class="d08-02-04-thumb d08-02-04-sk"></div>
          <div class="d08-02-04-body">
            <div class="d08-02-04-line d08-02-04-sk" style="width:85%"></div>
            <div class="d08-02-04-line d08-02-04-sk" style="width:100%"></div>
            <div class="d08-02-04-line d08-02-04-sk" style="width:60%"></div>
            <div class="d08-02-04-foot">
              <div class="d08-02-04-avatar d08-02-04-sk"></div>
              <div class="d08-02-04-line d08-02-04-sk" style="width:40%;margin:0"></div>
            </div>
          </div>
        </div>

CSS

.d08-02-04{background:#f3f4f6}
        .d08-02-04-card{
          width:240px;background:#fff;border-radius:12px;overflow:hidden;
          box-shadow:0 4px 14px rgba(0,0,0,.08);
        }
        .d08-02-04-thumb{width:100%;height:90px}
        .d08-02-04-body{padding:14px}
        .d08-02-04-line{height:10px;border-radius:5px;margin-bottom:8px}
        .d08-02-04-foot{display:flex;align-items:center;gap:8px;margin-top:12px}
        .d08-02-04-avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0}
        .d08-02-04-sk{
          background:#e5e7eb;position:relative;overflow:hidden;
        }
        .d08-02-04-sk::after{
          content:"";position:absolute;inset:0;transform:translateX(-100%);
          background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
          animation:d08-02-04-shimmer 1.4s ease-in-out infinite;
        }
        @keyframes d08-02-04-shimmer{to{transform:translateX(100%)}}

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