パーツ番号 08-02-06 ・ CSSのみ

ロゴパルスローダー

中央のロゴが脈打ち、背景にリングが広がっていくローダー。WordPressサイトの初回表示時のスプラッシュ演出にぴったりです。

scrollautocss

プレビュー

ソースコード

HTML

<div class="d08-02-06-wrap">
          <span class="d08-02-06-ring"></span>
          <span class="d08-02-06-ring d08-02-06-ring2"></span>
          <span class="d08-02-06-logo">SITE</span>
        </div>

CSS

.d08-02-06{background:#111827}
        .d08-02-06-wrap{
          position:relative;width:120px;height:120px;
          display:flex;align-items:center;justify-content:center;
        }
        .d08-02-06-logo{
          position:relative;z-index:1;color:#fff;font-weight:800;font-size:20px;
          letter-spacing:.2em;animation:d08-02-06-pulse 1.6s ease-in-out infinite;
        }
        .d08-02-06-ring{
          position:absolute;inset:0;border-radius:50%;
          border:2px solid rgba(96,165,250,.8);
          animation:d08-02-06-ripple 1.6s ease-out infinite;
        }
        .d08-02-06-ring2{animation-delay:.8s}
        @keyframes d08-02-06-pulse{
          0%,100%{transform:scale(1);opacity:1}
          50%{transform:scale(1.12);opacity:.85}
        }
        @keyframes d08-02-06-ripple{
          0%{transform:scale(.5);opacity:1}
          100%{transform:scale(1.4);opacity:0}
        }

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