パーツ番号 11-12-10 ・ CSSのみ

進捗バー付き起動画面(静止・固定値)

ロゴ下に読み込み進捗バーを68%固定で表示した起動画面。初期データの多いWordPress会員システムなどで、読み込み中の状態を静止見本として示せます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-12-10-wrap">
          <div class="d11-12-10-logo">
            <svg viewBox="0 0 40 40" width="26" height="26"><rect x="8" y="8" width="24" height="24" rx="6" fill="#fff"/></svg>
          </div>
          <p class="d11-12-10-name">Tsumugi</p>
        </div>
        <div class="d11-12-10-bar">
          <div class="d11-12-10-track">
            <div class="d11-12-10-fill"></div>
          </div>
          <p class="d11-12-10-pct">読み込み中 68%</p>
        </div>

CSS

.d11-12-10{ background:#1e1b4b; padding:0; }
        .d11-12-10-wrap{ text-align:center; }
        .d11-12-10-logo{ width:52px; height:52px; margin:0 auto; border-radius:14px; background:#6366f1; display:flex; align-items:center; justify-content:center; }
        .d11-12-10-name{ margin:10px 0 0; font-size:13px; font-weight:700; color:#e0e7ff; letter-spacing:.04em; }
        .d11-12-10-bar{ position:absolute; left:0; right:0; bottom:22px; padding:0 32px; }
        .d11-12-10-track{ width:100%; height:5px; border-radius:999px; background:rgba(255,255,255,.15); overflow:hidden; }
        .d11-12-10-fill{ width:68%; height:100%; border-radius:999px; background:#818cf8; }
        .d11-12-10-pct{ margin:8px 0 0; font-size:10px; color:#a5b4fc; text-align:center; }

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