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

ドットマトリクスウェーブローダー

格子状に並んだ15個の四角が斜めに波打ちながら明滅するローダー。WordPressのダッシュボード風管理画面やデータ集計中の表示に使えます。

autocss

プレビュー

ソースコード

HTML

<div class="d08-02-11-wrap">
          <div class="d08-02-11-grid" aria-hidden="true">
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
          </div>
          <p class="d08-02-11-text">読み込み中</p>
        </div>

CSS

.d08-02-11-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
        .d08-02-11-grid{display:grid;grid-template-columns:repeat(5,10px);gap:6px}
        .d08-02-11-grid span{width:10px;height:10px;border-radius:3px;background:#6366f1;animation:d08-02-11-wave 1.4s ease-in-out infinite}
        .d08-02-11-grid span:nth-child(5n+1){animation-delay:0s}
        .d08-02-11-grid span:nth-child(5n+2){animation-delay:.08s}
        .d08-02-11-grid span:nth-child(5n+3){animation-delay:.16s}
        .d08-02-11-grid span:nth-child(5n+4){animation-delay:.24s}
        .d08-02-11-grid span:nth-child(5n+5){animation-delay:.32s}
        @keyframes d08-02-11-wave{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
        .d08-02-11-text{margin:0;font-size:12.5px;color:#6b7280;letter-spacing:.08em}

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