ローディングアニメーション css コピペ集 — 全7種を比較

2026-07-07 公開 · Motion Lab

読み込み中の「待たされている感」を減らすローディングアニメーションを、Motion Labで公開しているLOADINGカテゴリ全7種類まとめて紹介します。どれもコード全文をコピーするだけで動作します。どれを選べばいいか迷ったときの目安も併記しました。

スケルトンスクリーン — コンテンツの形を先に見せる

読み込み中のカード・リストの「枠」を先に表示する手法。レイアウトシフトが起きず、体感速度が最も高い方式です。

実装デモ：Skeleton Loader（CSSのみ）、Tailwind Pulse Skeleton（Tailwind版）

回転する円やドットの明滅で「処理中」を最小コストで伝えます。1〜3秒程度の短い待ち時間に最適。

実装デモ：Spinner、Dots Pulse

進捗率が計測できるアップロード・ダウンロード処理に向きます。バー型とリング型、単純な帯状の2パターンを用意。

実装デモ：Progress Bar（CSS+JS）、Progress Ring（CSS+JS）、Bar Loader（CSSのみ）

リスト・カード型のコンテンツ待ち → スケルトンスクリーン

API通信・ボタン押下直後の短い待ち → スピナー / ドット

アップロード・ダウンロード等、進捗率が分かる処理 → プログレスバー / リング

Tailwind CSSプロジェクト → Tailwind Pulse Skeleton（animate-pulse ベース）

7種類全部使う必要がありますか？

いいえ、1サイトにつき用途に応じて1〜2種類で十分です。乱用するとかえって「重い」印象を与えます。

ローディングが一瞬で終わる場合は？

300ms未満なら表示しない方が体感が良い場合もあります。チラつき防止のため最低表示時間を設けるのがコツです。

CSSだけで進捗率(%)を動的に反映できますか？

静的なCSSアニメーションでは不可能です。Progress Bar / Progress Ring は実際の進捗値をJSで反映するため css js 構成になっています。

スケルトンとスピナー、結局どちらが良いですか？

コンテンツの形が決まっているリスト・カード・記事はスケルトンが優勢、処理内容やサイズが不定ならスピナーが適します。

※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。