CSSローダー生成器 — 画像なしのローディングアニメーション

ローディングインジケーターは非同期操作での優れたUXに不可欠です。生成器は画像やJavaScriptを一切使わないCSSスピナーとローディングアニメーションを作成します。

よく使うローダースタイル

円形スピナー（border + border-radius + rotate アニメーション）。3つのバウンドドット（opacity + translateYアニメーション）。パルサークル（scale + opacity）。スケルトンローディング（グレーの長方形上のシマーアニメーション）。UIに合ったスタイルを選択してください。

CSSアニメーションのパフォーマンス

GPUコンポジットのためtransformとopacityのみをアニメーションさせます。CSSアニメーションは別のスレッドで実行されるためJSアニメーションより効率的です。will-change: transformは慎重に使用——GPUメモリを確保します。

ローダーを表示するタイミング

300ms以上かかる操作でローダーを表示。100ms未満：インジケーター不要。100〜300ms：微妙なフィードバック。300ms以上：スピナー。1秒以上：可能であれば進捗インジケーターを追加してユーザーを安心させましょう。