問い合わせフォームの送信中や、ページの読み込み中に、何も表示されないと「固まったのかな？」と不安になってしまいます。

この記事では、コピペするだけで使えるローディングアニメーション（読み込み中の表示）を20個まとめました。
定番のくるくる回る円から、弾むドット、スケルトン表示、文字のアニメーション、チャットの「入力中」表示まで、場面ごとに使い分けられる種類を用意しています。

どれもHTMLとCSSだけで動くので、JavaScriptは必要ありません。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、読み込み中の表示を出したい場所に貼り付けます。

この記事のサンプルは、ずっと動き続ける見本として表示しています。
実際のサイトで「読み込みが終わったら消す」ようにするには、JavaScriptで表示・非表示を切り替える仕組みと組み合わせて使ってください。

01. 定番のくるくる回る円

円の一部だけ色を付けて回転させる、もっとも定番の読み込み表示です。

実際の見た目

HTMLコード

<div class="kts-load01"></div>

CSSコード

.kts-load01 { width: 40px; height: 40px; border: 4px solid #E5E7EB; border-top-color: #3B82F6; border-radius: 50%; animation: kts-load01-spin 1s linear infinite; }
@keyframes kts-load01-spin { to { transform: rotate(360deg); } }

02. 2色のリング

上下を2色に塗り分けた、少し華やかな回転タイプです。

実際の見た目

HTMLコード

<div class="kts-load02"></div>

CSSコード

.kts-load02 { width: 40px; height: 40px; border: 4px solid transparent; border-top-color: #EC4899; border-bottom-color: #8B5CF6; border-radius: 50%; animation: kts-load02-spin .9s linear infinite; }
@keyframes kts-load02-spin { to { transform: rotate(360deg); } }

03. 弾む3つのドット

3つの丸が順番にぴょんぴょん跳ねる、かわいらしいタイプです。

実際の見た目

HTMLコード

<div class="kts-load03"><span></span><span></span><span></span></div>

CSSコード

.kts-load03 { display: flex; gap: 8px; align-items: flex-end; height: 32px; }
.kts-load03 span { width: 12px; height: 12px; border-radius: 50%; background: #F59E0B; animation: kts-load03-bounce .6s ease-in-out infinite alternate; }
.kts-load03 span:nth-child(2) { animation-delay: .2s; }
.kts-load03 span:nth-child(3) { animation-delay: .4s; }
@keyframes kts-load03-bounce { to { transform: translateY(-16px); } }

04. 点滅する3つのドット

3つの丸が順番に明るくなる、控えめなタイプです。

実際の見た目

HTMLコード

<div class="kts-load04"><span></span><span></span><span></span></div>

CSSコード

.kts-load04 { display: flex; gap: 8px; }
.kts-load04 span { width: 12px; height: 12px; border-radius: 50%; background: #10B981; animation: kts-load04-blink 1.2s ease-in-out infinite; }
.kts-load04 span:nth-child(2) { animation-delay: .2s; }
.kts-load04 span:nth-child(3) { animation-delay: .4s; }
@keyframes kts-load04-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

05. 音楽プレーヤー風のバー

縦の棒が伸び縮みする、イコライザーのようなタイプです。

実際の見た目

HTMLコード

<div class="kts-load05"><span></span><span></span><span></span><span></span><span></span></div>

CSSコード

.kts-load05 { display: flex; gap: 4px; align-items: center; height: 36px; }
.kts-load05 span { width: 5px; height: 100%; background: #6366F1; border-radius: 3px; animation: kts-load05-bar 1s ease-in-out infinite; }
.kts-load05 span:nth-child(2) { animation-delay: .1s; }
.kts-load05 span:nth-child(3) { animation-delay: .2s; }
.kts-load05 span:nth-child(4) { animation-delay: .3s; }
.kts-load05 span:nth-child(5) { animation-delay: .4s; }
@keyframes kts-load05-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

06. 広がる波紋

中心から波紋が広がって消えていく、やわらかい印象のタイプです。

実際の見た目

HTMLコード

<div class="kts-load06"><span></span><span></span></div>

CSSコード

.kts-load06 { position: relative; width: 48px; height: 48px; }
.kts-load06 span { position: absolute; inset: 0; border: 3px solid #0EA5E9; border-radius: 50%; opacity: 0; animation: kts-load06-ripple 1.6s ease-out infinite; }
.kts-load06 span:nth-child(2) { animation-delay: .8s; }
@keyframes kts-load06-ripple { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

07. 二重に回るリング

内側と外側が逆向きに回る、少し凝ったタイプです。

実際の見た目

HTMLコード

<div class="kts-load07"><span></span></div>

CSSコード

.kts-load07 { position: relative; width: 44px; height: 44px; border: 3px solid transparent; border-top-color: #14B8A6; border-right-color: #14B8A6; border-radius: 50%; animation: kts-load07-spin 1.2s linear infinite; }
.kts-load07 span { position: absolute; inset: 6px; border: 3px solid transparent; border-bottom-color: #F97316; border-left-color: #F97316; border-radius: 50%; animation: kts-load07-spin .8s linear infinite reverse; }
@keyframes kts-load07-spin { to { transform: rotate(360deg); } }

08. 回転する四角

四角がくるくると回りながら形を変える、シンプルなタイプです。

実際の見た目

HTMLコード

<div class="kts-load08"></div>

CSSコード

.kts-load08 { width: 30px; height: 30px; background: #EF4444; animation: kts-load08-rotate 1.4s ease-in-out infinite; }
@keyframes kts-load08-rotate { 0% { transform: rotate(0); border-radius: 0; } 50% { transform: rotate(180deg); border-radius: 50%; } 100% { transform: rotate(360deg); border-radius: 0; } }

09. 「読み込み中…」の文字

文字の後ろの「…」が増えていく、言葉で伝えるタイプです。

実際の見た目

HTMLコード

<div class="kts-load09">読み込み中</div>

CSSコード

.kts-load09 { margin: 0; font-size: 15px; font-weight: 700; color: #374151; font-family: sans-serif; }
.kts-load09::after { content: ""; display: inline-block; width: 1.5em; text-align: left; animation: kts-load09-dots 1.5s steps(4) infinite; }
@keyframes kts-load09-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

10. 左右に往復するバー

細いバーの中を光が行き来する、ページ上部に置きやすいタイプです。

実際の見た目

HTMLコード

<div class="kts-load10"><span></span></div>

CSSコード

.kts-load10 { position: relative; width: 100%; max-width: 240px; height: 4px; background: #DBEAFE; border-radius: 2px; overflow: hidden; }
.kts-load10 span { position: absolute; top: 0; width: 30%; height: 100%; background: #2563EB; border-radius: 2px; animation: kts-load10-move 1.2s ease-in-out infinite alternate; }
@keyframes kts-load10-move { from { left: 0; } to { left: 70%; } }

11. 伸び縮みする弧

円の弧が伸びたり縮んだりしながら回る、スマホアプリ風のタイプです。

実際の見た目

HTMLコード

<svg class="kts-load11" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20"></circle></svg>

CSSコード

.kts-load11 { width: 44px; height: 44px; animation: kts-load11-spin 2s linear infinite; }
.kts-load11 circle { fill: none; stroke: #7C3AED; stroke-width: 4; stroke-linecap: round; animation: kts-load11-dash 1.5s ease-in-out infinite; }
@keyframes kts-load11-spin { to { transform: rotate(360deg); } }
@keyframes kts-load11-dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }

12. グラデーションのリング

色がなめらかに変わる輪が回る、華やかなタイプです。

実際の見た目

HTMLコード

<div class="kts-load12"></div>

CSSコード

.kts-load12 { width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, #EC4899); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); animation: kts-load12-spin 1s linear infinite; }
@keyframes kts-load12-spin { to { transform: rotate(360deg); } }

13. ドキドキ鼓動する丸

丸が大きくなったり小さくなったりする、シンプルなタイプです。

実際の見た目

HTMLコード

<div class="kts-load13"></div>

CSSコード

.kts-load13 { width: 36px; height: 36px; border-radius: 50%; background: #F43F5E; animation: kts-load13-beat 1s ease-in-out infinite; }
@keyframes kts-load13-beat { 0%, 100% { transform: scale(.6); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }

14. 4つの四角が光るタイプ

田の字に並んだ四角が順番に光る、タイル風のタイプです。

実際の見た目

HTMLコード

<div class="kts-load14"><span></span><span></span><span></span><span></span></div>

CSSコード

.kts-load14 { display: grid; grid-template-columns: repeat(2, 14px); gap: 4px; }
.kts-load14 span { width: 14px; height: 14px; background: #22C55E; border-radius: 3px; animation: kts-load14-flash 1.2s ease-in-out infinite; }
.kts-load14 span:nth-child(2) { animation-delay: .3s; }
.kts-load14 span:nth-child(4) { animation-delay: .6s; }
.kts-load14 span:nth-child(3) { animation-delay: .9s; }
@keyframes kts-load14-flash { 0%, 100% { opacity: .25; } 30% { opacity: 1; } }

15. スケルトン（読み込み中のカード）

文章や画像の位置に灰色の仮の形を出す、最近のサイトでよく見るタイプです。

実際の見た目

HTMLコード

<div class="kts-load15">
  <div class="kts-load15-img"></div>
  <div class="kts-load15-line"></div>
  <div class="kts-load15-line kts-load15-short"></div>
</div>

CSSコード

.kts-load15 { width: 100%; max-width: 280px; }
.kts-load15-img, .kts-load15-line { border-radius: 6px; background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%); background-size: 200% 100%; animation: kts-load15-shine 1.4s linear infinite; }
.kts-load15-img { height: 120px; margin-bottom: 12px; }
.kts-load15-line { height: 12px; margin-bottom: 8px; }
.kts-load15-short { width: 60%; }
@keyframes kts-load15-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

16. 文字が1つずつ跳ねるタイプ

「LOADING」の文字が波のように順番に跳ねる、楽しい雰囲気のタイプです。

実際の見た目

HTMLコード

<div class="kts-load16"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>

CSSコード

.kts-load16 { display: flex; gap: 2px; margin: 0; font-size: 20px; font-weight: 800; color: #0EA5E9; font-family: sans-serif; }
.kts-load16 span { animation: kts-load16-wave 1.2s ease-in-out infinite; }
.kts-load16 span:nth-child(2) { animation-delay: 0.1s; }
.kts-load16 span:nth-child(3) { animation-delay: 0.2s; }
.kts-load16 span:nth-child(4) { animation-delay: 0.3s; }
.kts-load16 span:nth-child(5) { animation-delay: 0.4s; }
.kts-load16 span:nth-child(6) { animation-delay: 0.5s; }
.kts-load16 span:nth-child(7) { animation-delay: 0.6s; }
@keyframes kts-load16-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } }

17. 文字に光が走るタイプ

文字の上を光がすっと流れる、上品なタイプです。

実際の見た目

HTMLコード

<div class="kts-load17">Now Loading</div>

CSSコード

.kts-load17 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .05em; background: linear-gradient(90deg, #9CA3AF 30%, #F9FAFB 50%, #9CA3AF 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kts-load17-shine 2s linear infinite; font-family: sans-serif; }
@keyframes kts-load17-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

18. くるっと裏返る四角

四角がパタパタと裏返る、目を引く動きのタイプです。

実際の見た目

HTMLコード

<div class="kts-load18"></div>

CSSコード

.kts-load18 { width: 32px; height: 32px; background: #F97316; border-radius: 4px; animation: kts-load18-flip 1.2s ease-in-out infinite; }
@keyframes kts-load18-flip { 0% { transform: perspective(120px) rotateX(0) rotateY(0); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } }

19. 周りを回る小さな丸

大きな丸の周りを小さな丸が回る、惑星のようなタイプです。

実際の見た目

HTMLコード

<div class="kts-load19"><span></span></div>

CSSコード

.kts-load19 { position: relative; width: 44px; height: 44px; border: 2px dashed #CBD5E1; border-radius: 50%; animation: kts-load19-spin 1.4s linear infinite; }
.kts-load19 span { position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #0F766E; }
@keyframes kts-load19-spin { to { transform: rotate(360deg); } }

20. チャットの「入力中」表示

吹き出しの中で点が動く、メッセージを入力中であることを伝えるタイプです。

実際の見た目

HTMLコード

<div class="kts-load20"><span></span><span></span><span></span></div>

CSSコード

.kts-load20 { display: inline-flex; gap: 5px; padding: 12px 16px; background: #F3F4F6; border-radius: 18px 18px 18px 4px; }
.kts-load20 span { width: 8px; height: 8px; border-radius: 50%; background: #9CA3AF; animation: kts-load20-typing 1.2s ease-in-out infinite; }
.kts-load20 span:nth-child(2) { animation-delay: .15s; }
.kts-load20 span:nth-child(3) { animation-delay: .3s; }
@keyframes kts-load20-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

カスタマイズの小ワザ

• 大きさを変えたい時は、widthとheightの数値を同じ割合で変えてください。
• 動きの速さは、animationの秒数（1sなど）で変えられます。数字を大きくするとゆっくり、小さくすると速くなります。
• 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。サイトのテーマカラーに合わせると統一感が出ます。
• 動きの激しいアニメーションは、見る人によっては負担になることがあります。1ページに使うのは1種類までにしましょう。
• 15番のスケルトン表示は、実際に表示される内容の形に合わせて、四角や線の数を調整してください。

まとめ｜早見表

使いたい場面	該当するローディング
定番の回転	01, 02, 07, 11, 12
かわいく見せたい	03, 13, 16, 19
控えめにしたい	04, 10, 17
動きで目を引く	05, 06, 08, 14, 18
言葉で伝えたい	09, 16, 17
記事一覧・カードの読み込み	15
チャット・問い合わせ	20

20個のローディングアニメーションは、HTMLとCSSだけで動く。大きさはwidthとheight、速さはanimationの秒数で調整でき、読み込み完了時に消すにはJavaScriptと組み合わせる。