四角ステップローダー

解説

四角ステップローダーは、1 つの正方形が画面の四隅を時計回りに「角を踏みながら」移動し、同時に回転する幾何的なローダーです。CSS のみで動き、JavaScript は不要です。@keyframes の中で 25% ごとに translate() で位置を、rotate() で角度を切り替えることで、四角形が正方形の軌道をなぞるように一周します。ease-in-out を効かせているので、各コーナーで一瞬たまって踏みしめるような動きになります。

向いている場面

• ダッシュボードや管理画面の処理中表示
• テック系・SaaS のシンプルで無機質なローディング
• データ集計やレポート生成の待機サイン

移動量はキーフレーム内の 40px が正方形の一辺に対応します。サイズを変えるときは .sq-load の幅・高さと、この 40px を同じ値にそろえてください。色は background の #667eea で調整できます。速度は animation の 2s を増減します。常時回り続けるため、prefers-reduced-motion 環境では停止させる配慮も検討しましょう。

使用例・適したシーン

• データ取得中の表示
• 送信ボタンクリック後のフィードバック
• 画像読み込み待ち