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

完了予定時刻付きメンテナンスページ

時計アイコンと作業完了予定時刻を明記した静止のメンテナンス画面。復旧見込みを伝えたいシステム停止時の案内に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-09-11-wrap">
          <svg class="d11-09-11-clock" width="52" height="52" viewBox="0 0 52 52" fill="none">
            <circle cx="26" cy="26" r="22" stroke="#93c5fd" stroke-width="3" fill="#eff6ff"/>
            <path d="M26 14v12l9 6" stroke="#2563eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <div class="d11-09-11-title">メンテナンス中です</div>
          <p class="d11-09-11-text">作業完了予定 15:00 頃</p>
        </div>

CSS

.d11-09-11-wrap{ text-align:center; }
        .d11-09-11-clock{ display:block; margin:0 auto 14px; }
        .d11-09-11-title{ font-size:16px; font-weight:700; color:#374151; }
        .d11-09-11-text{ margin-top:8px; font-size:12px; color:#9ca3af; }

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