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

リスト末尾の読み込み中スピナー表示

スクロール末尾に小さな回転アイコンと「読み込み中」の文字を固定表示した静止見本です。無限スクロール実装時に追加読み込み中の見た目を事前に確認できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-04-frame">
          <div class="d11-11-04-list">
            <div class="d11-11-04-row"><span class="d11-11-04-av"></span><div class="d11-11-04-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-04-row"><span class="d11-11-04-av"></span><div class="d11-11-04-lines"><span></span><span class="short"></span></div></div>
          </div>
          <div class="d11-11-04-loading"><span class="d11-11-04-spin"></span><span class="d11-11-04-txt">読み込み中...</span></div>
        </div>

CSS

.d11-11-04-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; }
        .d11-11-04-list{ padding:14px 14px 4px; display:flex; flex-direction:column; gap:12px; }
        .d11-11-04-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-04-av{ width:28px; height:28px; border-radius:50%; background:#dbe4f5; flex:0 0 auto; }
        .d11-11-04-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
        .d11-11-04-lines span{ height:8px; border-radius:4px; background:#e6e9ee; display:block; }
        .d11-11-04-lines span.short{ width:55%; }
        .d11-11-04-loading{ display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 14px 16px; }
        .d11-11-04-spin{ width:16px; height:16px; border-radius:50%; border:2.5px solid #dbe4f5; border-top-color:#6366f1; transform:rotate(120deg); display:block; }
        .d11-11-04-txt{ font-size:11px; color:#9aa1ab; }

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