振り子スイングローダー
振り子スイングローダーは、ひもで吊られた玉が左右に揺れる古典的なローダーです。玉である span に transform-origin:50% -32px を設定し、要素の上方にある見えない支点を中心に回転させています。
解説
振り子スイングローダーは、ひもで吊られた玉が左右に揺れる古典的なローダーです。玉である span に transform-origin:50% -32px を設定し、要素の上方にある見えない支点を中心に回転させています。動きは transform:rotate を -40deg から 40deg へ往復させる @keyframes と ease-in-out のイージングで作られ、端で速度が緩むため本物の振り子に近い自然な揺れになります。CSS のみで動きます。
使う場面と調整
穏やかで主張が強すぎないため、待ち時間が長くなりがちな処理や、落ち着いたトーンのサイトの待機表示に向きます。揺れ幅は rotate の角度、揺れの速さは animation の秒数で調整します。ひもの長さに当たる transform-origin の値を変えると、振り幅の見え方が変わります。
- 玉の色は
background、大きさはwidth/height - 支点の位置は
transform-originの負の値 - 無限往復のため
prefers-reduced-motion配慮を推奨
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
揺れ幅を大きくできますか。
swing の keyframes にある rotate の角度を -40deg / 40deg より大きくすると振り幅が広がります。あわせて transform-origin のひも長を調整すると見た目のバランスが取れます。
玉を複数並べられますか。
並べられます。ニュートンのゆりかご風にしたい場合は span を複数置き、両端の玉だけ animation-delay をずらして交互に揺らすと、ぶつかり合う動きを表現できます。