この記事にはプロモーションが含まれています。

【コピペOK】ローディングアニメーション｜5種類【Web制作】

2025-08-13

ケケンタ

ローディングアニメーションを実装したい……

ケケンタ

ユーザーの待機時間を快適にしたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
ローディングアニメーション

をご紹介します。

5種類のアニメーション効果を完全網羅した実装なので、いままさに「ローディングアニメーションを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するローディングアニメーション

スピナー効果（回転するスピナー）
パルス効果（脈動効果）
フェード効果（フェードイン/アウト）
スライド効果（スライドイン/アウト）
ズーム効果（ズームイン/アウト）

ケケンタ

特にデータ読み込みや処理中の表示には、ローディングアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

【Web制作】ボタンホバーアニメーション完全版｜8カテゴリ・53種類を網羅

【Web制作】ナビゲーションタブアニメーション完全版｜5カテゴリ・26種類を網羅

【Web制作】メニューアニメーション完全版｜8カテゴリ・40種類を網羅

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/13 08:45:33時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/13 05:22:48時点 Amazon調べ-詳細)

ローディングアニメーションとは

ローディングアニメーションは、データ読み込みや処理中であることをユーザーに伝えるアニメーション効果です。ユーザーの待機時間を快適にし、システムが正常に動作していることを示す効果的な手法です。

効果的な使用場面

適している場面

データ読み込み中
API通信中
ファイルアップロード中
ページ遷移時
処理実行中

避けるべき場面

即座に完了する処理（アニメーションが不要）
長時間の処理（進捗表示が適切）
エラーが頻発する処理

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
スピナー効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
パルス効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
フェード効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライド効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ズーム効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

スピナー効果

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスピナー効果の特徴

シンプルで分かりやすい実装
高いパフォーマンス
すべてのブラウザで対応

② HTML

<div class="loading-container">
  <div class="spinner-loader">
    <div class="spinner"></div>
  </div>
  <div class="loading-text">読み込み中...</div>
</div>

<button class="start-btn" onclick="startSpinner()">開始</button>

③ CSS

/* ローディングコンテナ */
.loading-container {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}

.spinner-loader {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}

.spinner {
  width: 100%;
  height: 100%;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 16px;
  color: #666;
  margin-top: 10px;
}

.start-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  margin-inline: auto;
  display: block;
}

.start-btn:hover {
  background: #2980b9;
}

/* スピナーアニメーション */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

④ JavaScript

function startSpinner() {
  const loadingContainer = document.querySelector('.loading-container');
  const startBtn = document.querySelector('.start-btn');

  // ローディング表示
  loadingContainer.style.display = 'flex';
  startBtn.style.display = 'none';

  // 3秒後にローディング終了
  setTimeout(() => {
    loadingContainer.style.display = 'none';
    startBtn.style.display = 'block';
  }, 3000);
}

⑤ カスタマイズ例

/* カラーテーマの変更 */
.spinner {
  border-top-color: #e74c3c;
}

/* スピナーサイズの調整 */
.spinner-loader {
  width: 80px;
  height: 80px;
}

/* 回転速度の調整 */
.spinner {
  animation: spin 0.8s linear infinite;
}

パルス効果

① デモ

See the Pen ローディングパルス by ケケンタ (@lgshifbg-the-looper) on CodePen.

このパルス効果の特徴

脈動する動的な表現
視覚的インパクトが高い
注目を集める効果

② HTML

<div class="loading-container">
  <div class="pulse-loader">
    <div class="pulse-dot"></div>
    <div class="pulse-dot"></div>
    <div class="pulse-dot"></div>
  </div>
  <div class="loading-text">読み込み中...</div>
</div>

<button class="start-btn" onclick="startPulse()">開始</button>

③ CSS

/* ローディングコンテナ */
.loading-container {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}

/* パルスローダーのスタイル */
.pulse-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.pulse-dot {
  width: 12px;
  height: 12px;
  background: #3498db;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite both;
}

.pulse-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.pulse-dot:nth-child(2) {
  animation-delay: -0.16s;
}

.pulse-dot:nth-child(3) {
  animation-delay: 0s;
}

.loading-text {
  font-size: 16px;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

.start-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  margin-inline: auto;
  display: block;
}

.start-btn:hover {
  background: #2980b9;
}

/* パルスアニメーション */
@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

④ JavaScript

function startPulse() {
  const loadingContainer = document.querySelector('.loading-container');
  const startBtn = document.querySelector('.start-btn');

  // ローディング表示
  loadingContainer.style.display = 'flex';
  startBtn.style.display = 'none';

  // 3秒後にローディング終了
  setTimeout(() => {
    loadingContainer.style.display = 'none';
    startBtn.style.display = 'block';
  }, 3000);
}

⑤ カスタマイズ例

/* パルス効果の強度調整 */
@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.3;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* パルス速度の調整 */
.pulse-dot {
  animation: pulse 1s ease-in-out infinite both;
}

フェード効果

① デモ

See the Pen ローディングフェード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェード効果の特徴

スムーズな表示・非表示
視覚的に優しい印象
高パフォーマンス

② HTML

<div class="loading-container">
  <div class="fade-loader">
    <div class="fade-circle"></div>
    <div class="fade-circle"></div>
    <div class="fade-circle"></div>
  </div>
  <div class="loading-text">読み込み中...</div>
</div>

<button class="start-btn" onclick="startFade()">開始</button>

③ CSS

/* ローディングコンテナ */
.loading-container {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}

/* フェードローダーのスタイル */
.fade-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.fade-circle {
  width: 10px;
  height: 10px;
  background: #3498db;
  border-radius: 50%;
  animation: fade 1.4s ease-in-out infinite both;
}

.fade-circle:nth-child(1) {
  animation-delay: -0.32s;
}

.fade-circle:nth-child(2) {
  animation-delay: -0.16s;
}

.fade-circle:nth-child(3) {
  animation-delay: 0s;
}

.loading-text {
  font-size: 16px;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

.start-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  margin-inline: auto;
  display: block;
}

.start-btn:hover {
  background: #2980b9;
}

/* フェードアニメーション */
@keyframes fade {
  0%, 80%, 100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}

④ JavaScript

function startFade() {
  const loadingContainer = document.querySelector('.loading-container');
  const startBtn = document.querySelector('.start-btn');

  // ローディング表示
  loadingContainer.style.display = 'flex';
  startBtn.style.display = 'none';

  // 3秒後にローディング終了
  setTimeout(() => {
    loadingContainer.style.display = 'none';
    startBtn.style.display = 'block';
  }, 3000);
}

⑤ カスタマイズ例

/* フェード効果の強度調整 */
@keyframes fade {
  0%, 80%, 100% {
    opacity: 0.1;
  }
  40% {
    opacity: 1;
  }
}

/* フェード速度の調整 */
.fade-circle {
  animation: fade 1s ease-in-out infinite both;
}

スライド効果

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

動的なスライド表現
視覚的インパクトが高い
モダンな印象

② HTML

<div class="loading-container">
  <div class="slide-loader">
    <div class="slide-bar"></div>
    <div class="slide-bar"></div>
    <div class="slide-bar"></div>
  </div>
  <div class="loading-text">読み込み中...</div>
</div>

<button class="start-btn" onclick="startSlide()">開始</button>

③ CSS

/* ローディングコンテナ */
.loading-container {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}

/* スライドローダーのスタイル */
.slide-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}

.slide-bar {
  width: 4px;
  height: 20px;
  background: #3498db;
  border-radius: 2px;
  animation: slide 1.2s ease-in-out infinite;
}

.slide-bar:nth-child(1) {
  animation-delay: -0.24s;
}

.slide-bar:nth-child(2) {
  animation-delay: -0.12s;
}

.slide-bar:nth-child(3) {
  animation-delay: 0s;
}

.loading-text {
  font-size: 16px;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

.start-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  margin-inline: auto;
  display: block;
}

.start-btn:hover {
  background: #2980b9;
}

/* スライドアニメーション */
@keyframes slide {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

④ JavaScript

function startSlide() {
  const loadingContainer = document.querySelector('.loading-container');
  const startBtn = document.querySelector('.start-btn');

  // ローディング表示
  loadingContainer.style.display = 'flex';
  startBtn.style.display = 'none';

  // 3秒後にローディング終了
  setTimeout(() => {
    loadingContainer.style.display = 'none';
    startBtn.style.display = 'block';
  }, 3000);
}

⑤ カスタマイズ例

/* スライド効果の強度調整 */
@keyframes slide {
  0%, 40%, 100% {
    transform: scaleY(0.2);
  }
  20% {
    transform: scaleY(1.5);
  }
}

/* スライド速度の調整 */
.slide-bar {
  animation: slide 1s ease-in-out infinite;
}

ズーム効果

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

拡大・縮小による動的表現
視覚的インパクトが高い
注目を集める効果

② HTML

<div class="loading-container">
  <div class="zoom-loader">
    <div class="zoom-circle"></div>
  </div>
  <div class="loading-text">読み込み中...</div>
</div>

<button class="start-btn" onclick="startZoom()">開始</button>

③ CSS

/* ズームローダーのスタイル */
.zoom-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.zoom-circle {
  width: 40px;
  height: 40px;
  background: #3498db;
  border-radius: 50%;
  animation: zoom 1.5s ease-in-out infinite;
}

/* ズームアニメーション */
@keyframes zoom {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

④ JavaScript

function startZoom() {
  const loadingContainer = document.querySelector('.loading-container');
  const startBtn = document.querySelector('.start-btn');

  // ローディング表示
  loadingContainer.style.display = 'flex';
  startBtn.style.display = 'none';

  // 3秒後にローディング終了
  setTimeout(() => {
    loadingContainer.style.display = 'none';
    startBtn.style.display = 'block';
  }, 3000);
}

⑤ カスタマイズ例

/* ズーム効果の強度調整 */
@keyframes zoom {
  0%, 100% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

/* ズーム速度の調整 */
.zoom-circle {
  animation: zoom 1s ease-in-out infinite;
}