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

バウンスドットローダー

3つのドットが順番に跳ねる軽快なローダー。フォーム送信中やWooCommerceのカート更新中の表示に向いています。

clickcssinput

プレビュー

ソースコード

HTML

<div class="d08-02-02-wrap">
          <div class="d08-02-02-dots">
            <span class="d08-02-02-dot"></span><span class="d08-02-02-dot"></span><span class="d08-02-02-dot"></span>
          </div>
          <p class="d08-02-02-text">データを取得しています</p>
        </div>

CSS

.d08-02-02-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
        .d08-02-02-dots{display:flex;gap:10px;height:34px;align-items:flex-end}
        .d08-02-02-dot{
          width:14px;height:14px;border-radius:50%;background:#10b981;
          animation:d08-02-02-bounce .6s ease-in-out infinite alternate;
        }
        .d08-02-02-dot:nth-child(2){animation-delay:.15s;background:#059669}
        .d08-02-02-dot:nth-child(3){animation-delay:.3s;background:#047857}
        .d08-02-02-text{margin:0;font-size:13px;color:#6b7280}
        @keyframes d08-02-02-bounce{
          from{transform:translateY(0)}
          to{transform:translateY(-18px)}
        }

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