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

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

実装の勘所

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

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

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

FAQ

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

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

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

他のカテゴリを見る

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

BOOKS · PR · AMAZON

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

学びを止めない · AMAZONサブスクPR

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

CREATOR TOOLS · スクール（PR）

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。