パーツ番号 09-03-02 ・ CSSのみ

メンテナンス中

2つの歯車SVGが逆回転しながら回り続け、「ただいまメンテナンス中」の文言を表示。WordPressのメンテナンス画面（maintenance.php やプラグインの停止中表示）に使えます。

csssvg3d

プレビュー

ソースコード

HTML

<div class="d09-03-02-wrap">
          <svg class="d09-03-02-gear d09-03-02-g1" viewBox="0 0 100 100" width="66" height="66" aria-hidden="true">
            <path fill="#5c6ac4" d="M50 32a18 18 0 100 36 18 18 0 000-36zm0 26a8 8 0 110-16 8 8 0 010 16zM50 4l6 10h-12zM50 96l-6-10h12zM4 50l10-6v12zM96 50l-10 6v-12zM18 18l11 3-8 8zM82 82l-11-3 8-8zM82 18l-3 11-8-8zM18 82l3-11 8 8z"/>
          </svg>
          <svg class="d09-03-02-gear d09-03-02-g2" viewBox="0 0 100 100" width="40" height="40" aria-hidden="true">
            <path fill="#a3aae8" d="M50 32a18 18 0 100 36 18 18 0 000-36zm0 26a8 8 0 110-16 8 8 0 010 16zM50 4l6 10h-12zM50 96l-6-10h12zM4 50l10-6v12zM96 50l-10 6v-12zM18 18l11 3-8 8zM82 82l-11-3 8-8zM82 18l-3 11-8-8zM18 82l3-11 8 8z"/>
          </svg>
          <p class="d09-03-02-msg">ただいまメンテナンス中</p>
          <p class="d09-03-02-sub">しばらくお待ちください</p>
        </div>

CSS

.d09-03-02{background:#f5f6fa}
        .d09-03-02-wrap{position:relative;text-align:center;padding-top:10px}
        .d09-03-02-gear{transform-origin:50% 50%}
        .d09-03-02-g1{animation:d322spin 4s linear infinite}
        .d09-03-02-g2{position:absolute;top:-6px;left:calc(50% + 20px);animation:d322spinrev 4s linear infinite}
        @keyframes d322spin{to{transform:rotate(360deg)}}
        @keyframes d322spinrev{to{transform:rotate(-360deg)}}
        .d09-03-02-msg{margin:22px 0 4px;font-weight:700;color:#3a4374;font-size:17px}
        .d09-03-02-sub{color:#8890b5;font-size:13px}

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