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

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

2025-08-26

ケケンタ

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

ケケンタ

データ読み込み中の表示を作りたい……

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

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

をご紹介します。

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

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

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

ケケンタ

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

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

あわせて読みたい

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

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

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

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

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

created by Rinker

ケケンタ

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

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

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

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

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

ケケンタ

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

タイマースタート

3:00

1分 3分 5分 10分

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

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

created by Rinker

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

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

効果的な使用場面

適している場面

データ読み込み画面
API通信中
ファイルアップロード
処理中の表示
検索結果読み込み
画像読み込み

避けるべき場面

過度に派手なアニメーション
パフォーマンスを重視する場面
アクセシビリティを重視する場面

実装方法の比較

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

FontAwesomeの読み込み

FontAwesomeアイコンを使用するために、HTMLのheadセクションに以下のコードを追加してください。
※バージョンはご自身の環境にあわせてご選択ください。基本は最新で大丈夫かと思います。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

スピナー効果

アイコンが回転するスピナーアニメーションです。

① デモ

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

このスピナー効果の特徴

基本的な回転動き
視覚的インパクトが高い
ローディング感の演出

② HTML

<div class="icon-container">
  <div class="spinner-loading-icons">
    <i class="fas fa-cog spinner-loading-icon"></i>
    <i class="fas fa-sync-alt spinner-loading-icon"></i>
    <i class="fas fa-bullseye spinner-loading-icon"></i>
    <i class="fas fa-star spinner-loading-icon"></i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.spinner-loading-icons {
  display: flex;
  gap: 20px;
}

.spinner-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: spinner 2s linear infinite;
}

/* アニメーション効果 */
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-loading-icon.paused {
  animation-play-state: paused;
}

.spinner-loading-icon.slow {
  animation-duration: 3s;
}

.spinner-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.spinner-loading-icon');

  // スピナーローディングアニメーションクラス
  class SpinnerLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.2}s`;
        }, index * 100);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.toggleSpinner(icon);
        });
      });
    }

    toggleSpinner(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#ffd700';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new SpinnerLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* 回転軸の変更（X軸） */
.spinner-loading-icon {
  animation: spinnerX 2s linear infinite;
}

@keyframes spinnerX {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}

/* 回転速度の調整 */
.spinner-loading-icon {
  animation-duration: 1.5s;
}

/* 回転時の影効果 */
.spinner-loading-icon {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

パルス効果

アイコンが脈動するパルスアニメーションです。

① デモ

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

このパルス効果の特徴

脈動する動き
視覚的インパクトが高い
生命感のある表現

② HTML

<div class="icon-container">
  <div class="pulse-loading-icons">
    <i class="fas fa-heart pulse-loading-icon"></i>
    <i class="fas fa-heartbeat pulse-loading-icon"></i>
    <i class="fas fa-gem pulse-loading-icon"></i>
    <i class="fas fa-diamond pulse-loading-icon"></i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.pulse-loading-icons {
  display: flex;
  gap: 20px;
}

.pulse-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: pulse 1.5s ease-in-out infinite;
}

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

.pulse-loading-icon.paused {
  animation-play-state: paused;
}

.pulse-loading-icon.slow {
  animation-duration: 2s;
}

.pulse-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.pulse-loading-icon');

  // パルスローディングアニメーションクラス
  class PulseLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.3}s`;
        }, index * 150);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.togglePulse(icon);
        });
      });
    }

    togglePulse(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#ff6b6b';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new PulseLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* パルス強度の調整 */
.pulse-loading-icon {
  animation: pulseStrong 1.5s ease-in-out infinite;
}

@keyframes pulseStrong {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

/* パルス速度の調整 */
.pulse-loading-icon {
  animation-duration: 2s;
}

/* パルス時の色変化 */
.pulse-loading-icon {
  animation: pulseColor 1.5s ease-in-out infinite;
}

@keyframes pulseColor {
  0%, 100% { color: white; }
  50% { color: #ffd700; }
}

フェード効果

アイコンがフェードイン・アウトするアニメーションです。

① デモ

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

このフェード効果の特徴

滑らかなフェード動き
控えめな表現
上品な印象

② HTML

<div class="icon-container">
  <div class="fade-loading-icons">
    <i class="fas fa-crystal-ball fade-loading-icon"></i>
    <i class="fas fa-gem fade-loading-icon"></i>
    <i class="fas fa-star fade-loading-icon"></i>
    <i class="fas fa-sparkles fade-loading-icon"></i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.fade-loading-icons {
  display: flex;
  gap: 20px;
}

.fade-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: fade 2s ease-in-out infinite;
}

/* アニメーション効果 */
@keyframes fade {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.9);
  }
}

.fade-loading-icon.paused {
  animation-play-state: paused;
}

.fade-loading-icon.slow {
  animation-duration: 3s;
}

.fade-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.fade-loading-icon');

  // フェードローディングアニメーションクラス
  class FadeLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.4}s`;
        }, index * 200);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.toggleFade(icon);
        });
      });
    }

    toggleFade(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#00d2ff';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new FadeLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* フェード強度の調整 */
.fade-loading-icon {
  animation: fadeStrong 2s ease-in-out infinite;
}

@keyframes fadeStrong {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* フェード速度の調整 */
.fade-loading-icon {
  animation-duration: 2.5s;
}

/* フェード時のスケール効果 */
.fade-loading-icon {
  animation: fadeScale 2s ease-in-out infinite;
}

@keyframes fadeScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.8); }
}

スライド効果

アイコンがスライドイン・アウトするアニメーションです。

① デモ

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

このスライド効果の特徴

動的なスライド動き
視覚的インパクトが高い
方向性のある表現

② HTML

<div class="icon-container">
  <div class="slide-loading-icons">
    <i class="fas fa-bullseye slide-loading-icon"></i>
    <i class="fas fa-tent slide-loading-icon"></i>
    <i class="fas fa-masks-theater slide-loading-icon"></i>
    <i class="fas fa-palette slide-loading-icon"></i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* 固有のスタイル */
.slide-loading-icons {
  display: flex;
  gap: 20px;
}

.slide-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: slide 2s ease-in-out infinite;
}

/* アニメーション効果 */
@keyframes slide {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(20px);
    opacity: 0.7;
  }
}

.slide-loading-icon.paused {
  animation-play-state: paused;
}

.slide-loading-icon.slow {
  animation-duration: 3s;
}

.slide-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.slide-loading-icon');

  // スライドローディングアニメーションクラス
  class SlideLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.3}s`;
        }, index * 200);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.toggleSlide(icon);
        });
      });
    }

    toggleSlide(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#ff9ff3';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new SlideLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* スライド方向の変更（Y軸） */
.slide-loading-icon {
  animation: slideY 2s ease-in-out infinite;
}

@keyframes slideY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* スライド速度の調整 */
.slide-loading-icon {
  animation-duration: 2.5s;
}

/* スライド時の回転効果 */
.slide-loading-icon {
  animation: slideRotate 2s ease-in-out infinite;
}

@keyframes slideRotate {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(20px) rotate(180deg); }
}

ズーム効果

アイコンがズームイン・アウトするアニメーションです。

① デモ

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

このズーム効果の特徴

拡大・縮小の動き
視覚的インパクトが高い
焦点を集める効果

② HTML

<div class="icon-container">
  <div class="zoom-loading-icons">
    <i class="fas fa-search zoom-loading-icon"></i>
    <i class="fas fa-mobile-alt zoom-loading-icon"></i>
    <i class="fas fa-laptop zoom-loading-icon"></i>
    <i class="fas fa-clock zoom-loading-icon"></i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.zoom-loading-icons {
  display: flex;
  gap: 20px;
}

.zoom-loading-icon {
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: zoom 1.5s ease-in-out infinite;
}

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

.zoom-loading-icon.paused {
  animation-play-state: paused;
}

.zoom-loading-icon.slow {
  animation-duration: 2s;
}

.zoom-loading-icon.fast {
  animation-duration: 1s;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.zoom-loading-icon');

  // ズームローディングアニメーションクラス
  class ZoomLoadingAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // 自動アニメーション開始
        setTimeout(() => {
          icon.style.animationDelay = `${index * 0.2}s`;
        }, index * 150);

        // クリックで一時停止/再開
        icon.addEventListener('click', () => {
          this.toggleZoom(icon);
        });
      });
    }

    toggleZoom(icon) {
      if (icon.classList.contains('paused')) {
        icon.classList.remove('paused');
        icon.style.color = 'white';
      } else {
        icon.classList.add('paused');
        icon.style.color = '#feca57';
      }
    }

    setSpeed(icon, speed) {
      icon.classList.remove('slow', 'fast');
      if (speed === 'slow') {
        icon.classList.add('slow');
      } else if (speed === 'fast') {
        icon.classList.add('fast');
      }
    }
  }

  // アニメーション初期化
  new ZoomLoadingAnimation(icons);
});

⑤ カスタマイズ例

/* ズーム強度の調整 */
.zoom-loading-icon {
  animation: zoomStrong 1.5s ease-in-out infinite;
}

@keyframes zoomStrong {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

/* ズーム速度の調整 */
.zoom-loading-icon {
  animation-duration: 2s;
}

/* ズーム時の回転効果 */
.zoom-loading-icon {
  animation: zoomRotate 1.5s ease-in-out infinite;
}

@keyframes zoomRotate {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.3) rotate(180deg); }
}