CSSローディングアニメーション7種｜コピペ+AIプロンプト

読み込み中の表示は、体感速度をそのまま左右します。何も出さなければ「壊れた」と判断され、回り続けるだけのスピナーは待ち時間を長く感じさせます。ここでは待ち時間を伝える表現を7種類集めました。進捗が分かるバー、コンテンツの形を先に見せるスケルトン、短い待ちに向くスピナーを、用途別に選べます。

ローディングアニメーション · 7 EFFECTS

実装の勘所

短い待ちにローディング表示を出すと、一瞬だけ現れて消えるちらつきになり、かえって遅く感じられます。目安として、1秒未満は何も出さず、1〜3秒はスピナー、それ以上は進捗が分かる表示にしてください。

スケルトンの価値は「次に来るものの形が分かる」ことです。実際のコンテンツと大きさや配置が違うと、読み込み完了時にレイアウトが飛んで逆効果になります。行の高さと余白は本番と揃えてください。

視覚的な回転は支援技術には伝わりません。読み込み中の領域に aria-busy="true" を付けるか、aria-live で「読み込み中」と伝わるようにしてください。

FAQ

表示するコンテンツの形が決まっているならスケルトンが有利です。完成形が予告されるため体感の待ち時間が短くなります。形が予測できない処理（検索結果の件数が不明、ファイル処理など）や、画面全体ではなくボタン内の待ちにはスピナーが適しています。

transform と opacity だけで作られていれば、常時回転していてもGPU側で処理されるため負荷はほぼありません。避けるべきは width や left をアニメーションさせる実装で、これは毎フレーム再レイアウトを起こします。本ページのコードはすべて transform 基準です。

はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。

他のカテゴリを見る

全139種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むならカタログ一覧、長文の解説を読むならガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装するへ。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。