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

波形バーローダー

5本のバーが波打つイコライザ風ローダー。音声・動画系のWordPressサイトや、ポップな雰囲気の読み込み表示に合います。

autocssoverlay

プレビュー

ソースコード

HTML

<div class="d08-02-09-wrap">
          <div class="d08-02-09-bars">
            <span class="d08-02-09-bar"></span><span class="d08-02-09-bar"></span><span class="d08-02-09-bar"></span><span class="d08-02-09-bar"></span><span class="d08-02-09-bar"></span>
          </div>
          <p class="d08-02-09-text">処理中です…</p>
        </div>

CSS

.d08-02-09-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
        .d08-02-09-bars{display:flex;gap:7px;height:48px;align-items:center}
        .d08-02-09-bar{
          width:8px;height:100%;border-radius:4px;
          background:linear-gradient(180deg,#8b5cf6,#ec4899);
          animation:d08-02-09-wave 1s ease-in-out infinite;
        }
        .d08-02-09-bar:nth-child(1){animation-delay:0s}
        .d08-02-09-bar:nth-child(2){animation-delay:.12s}
        .d08-02-09-bar:nth-child(3){animation-delay:.24s}
        .d08-02-09-bar:nth-child(4){animation-delay:.36s}
        .d08-02-09-bar:nth-child(5){animation-delay:.48s}
        .d08-02-09-text{margin:0;font-size:13px;color:#6b7280}
        @keyframes d08-02-09-wave{
          0%,100%{transform:scaleY(.35)}
          50%{transform:scaleY(1)}
        }

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