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

ローディングインジケーター付きスプラッシュ(静止表示)

ロゴ下に読み込み中のドットを固定表示した起動画面。データ取得に少し時間がかかるWordPressの会員サイトなどで、待機中であることを伝える見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-12-03-wrap">
          <div class="d11-12-03-logo">S</div>
          <div class="d11-12-03-dots">
            <span class="d11-12-03-dot is-on"></span>
            <span class="d11-12-03-dot is-on"></span>
            <span class="d11-12-03-dot"></span>
          </div>
        </div>

CSS

.d11-12-03{ background:#0f172a; padding:0; }
        .d11-12-03-wrap{ text-align:center; }
        .d11-12-03-logo{ width:52px; height:52px; margin:0 auto; border-radius:14px; background:#38bdf8; color:#0f172a; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; }
        .d11-12-03-dots{ margin-top:20px; display:flex; gap:7px; justify-content:center; }
        .d11-12-03-dot{ width:7px; height:7px; border-radius:50%; background:#334155; }
        .d11-12-03-dot.is-on{ background:#38bdf8; }

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