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

プル・トゥ・リフレッシュ引っ張り中の見た目

回転アイコンと「引っ張って更新」の文字をリスト上部に固定表示した静止画です。WordPressの投稿一覧やスマホ表示のブログトップで、更新動作の説明画像として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-01-frame">
          <div class="d11-11-01-pull">
            <span class="d11-11-01-spin"></span>
            <p class="d11-11-01-txt">引っ張って更新</p>
          </div>
          <div class="d11-11-01-list">
            <div class="d11-11-01-row"><span class="d11-11-01-av"></span><div class="d11-11-01-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-01-row"><span class="d11-11-01-av"></span><div class="d11-11-01-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-01-row"><span class="d11-11-01-av"></span><div class="d11-11-01-lines"><span></span><span class="short"></span></div></div>
          </div>
        </div>

CSS

.d11-11-01-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; }
        .d11-11-01-pull{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:18px 0 14px; background:#f7f8fb; border-bottom:1px solid #eef0f3; }
        .d11-11-01-spin{ width:22px; height:22px; border-radius:50%; border:3px solid #dbe4f5; border-top-color:#6366f1; border-right-color:#6366f1; transform:rotate(45deg); display:block; }
        .d11-11-01-txt{ font-size:11px; color:#6b7280; font-weight:700; }
        .d11-11-01-list{ padding:12px 14px; display:flex; flex-direction:column; gap:12px; }
        .d11-11-01-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-01-av{ width:28px; height:28px; border-radius:50%; background:#dbe4f5; flex:0 0 auto; }
        .d11-11-01-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
        .d11-11-01-lines span{ height:8px; border-radius:4px; background:#e6e9ee; display:block; }
        .d11-11-01-lines span.short{ width:55%; }

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