HOME / EFFECTS / ローディングアニメーション
CSSローディングアニメーション14種｜コピペ+AIプロンプト
読み込み中の表示は、体感速度をそのまま左右します。何も出さなければ「壊れた」と判断され、回り続けるだけのスピナーは待ち時間を長く感じさせます。ここでは待ち時間を伝える表現を14種類集めました。進捗が分かるバー、コンテンツの形を先に見せるスケルトン、短い待ちに向くスピナーを、用途別に選べます。
ローディングアニメーション · 14 EFFECTS
実装の勘所
1秒未満の待ちには何も出さない
短い待ちにローディング表示を出すと、一瞬だけ現れて消えるちらつきになり、かえって遅く感じられます。目安として、1秒未満は何も出さず、1〜3秒はスピナー、それ以上は進捗が分かる表示にしてください。
スケルトンは実際のレイアウトに合わせる
スケルトンの価値は「次に来るものの形が分かる」ことです。実際のコンテンツと大きさや配置が違うと、読み込み完了時にレイアウトが飛んで逆効果になります。行の高さと余白は本番と揃えてください。
読み上げへの配慮を忘れない
視覚的な回転は支援技術には伝わりません。読み込み中の領域に aria-busy="true" を付けるか、aria-live で「読み込み中」と伝わるようにしてください。
FAQ
Q. スピナーとスケルトン、どちらを使うべきですか？
表示するコンテンツの形が決まっているならスケルトンが有利です。完成形が予告されるため体感の待ち時間が短くなります。形が予測できない処理（検索結果の件数が不明、ファイル処理など）や、画面全体ではなくボタン内の待ちにはスピナーが適しています。
Q. ローディングアニメーションは重くありませんか？
transform と opacity だけで作られていれば、常時回転していてもGPU側で処理されるため負荷はほぼありません。避けるべきは width や left をアニメーションさせる実装で、これは毎フレーム再レイアウトを起こします。本ページのコードはすべて transform 基準です。
Q. コードは無料で使えますか？
はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。
他のカテゴリを見る
全199種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスクPR
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
CREATOR TOOLS · スクール（PR）
※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。