9 マスグリッドパルスローダー
9 マスグリッドパルスローダーは、3×3 に並んだ四角がタイミングをずらして明滅する、データ処理を思わせるローダーです。CSS のみで動き、JavaScript は不要です。 display:grid で 9 個の span を 3 列に並べ、各マスへ nth-child ごとに少しずつ違う animation-d…
解説
9 マスグリッドパルスローダーは、3×3 に並んだ四角がタイミングをずらして明滅する、データ処理を思わせるローダーです。CSS のみで動き、JavaScript は不要です。display:grid で 9 個の span を 3 列に並べ、各マスへ nth-child ごとに少しずつ違う animation-delay を与えています。@keyframes では opacity を 0.2 と 1 の間で往復させ、波が伝わるように順番に光らせています。
使うと映える場面
- AI 処理中・推論中の「考えています」表示
- データ解析やバッチ集計の進行サイン
- テック寄りのダークな管理画面のローディング
マスの色は span の background（初期は #0ff）で変えられます。マスの大きさは grid-template-columns と span の幅・高さを同じ値でそろえます。光の流れ方は各 animation-delay の刻み（0.1 秒ずつ）を変えると印象が変わります。点滅が連続するため、明滅に敏感なユーザーへ配慮し prefers-reduced-motion での停止も検討してください。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
マスの数を増やせますか？
grid-template-columns の列数を増やし、span を追加して、それぞれに animation-delay を設定すれば拡張できます。delay の刻みをそろえると流れがきれいに見えます。
明滅のリズムを変えたいです。
各 span の animation-delay の値（0.1秒刻み）を調整すると、光が伝わる速さや順番が変わります。