Ajax通信中に読み込み中アニメーションを表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

Ajax通信中に読み込み中アニメーションを表示する方法

Ajax通信中に読み込み中アニメーションを表示する方法を紹介します。本記事では、HTML、CSS、JavaScriptを使って、Ajax通信の開始時に読み込み中アニメーションを表示し、通信完了後に自動で非表示にする方法を解説します。ページ全体を再読み込みせずにデータを取得する処理でも、ユーザーへ通信中であることを分かりやすく伝えられます。

このサンプルコードでは、ボタンをクリックするとAjax通信を開始し、通信中だけ読み込み中アニメーションを表示します。通信が完了すると自動でアニメーションが消え、取得したデータを画面へ表示します。実際のWebアプリや管理画面などでも利用しやすい基本的な実装です。

Ajax通信中の読み込み中アニメーションは、検索機能、データ一覧の更新、お問い合わせフォーム、商品一覧の取得など、ページ遷移を行わずデータを取得する場面でよく利用されます。通信中であることを視覚的に伝えることで、ユーザーが「処理が止まった」と誤解することを防ぎ、操作性を向上できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

Ajax通信デモ

ボタンを押すと、通信中だけ読み込み中アニメーションを表示します。

通信中…

ここに取得結果が表示されます。

通信開始時に is-show を追加し、通信完了後に削除して読み込み中表示を切り替えます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>Ajax通信中に読み込み中アニメーションを表示する方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- Ajax通信デモ -->
  <div class="ajax-loading-animation_wrap">

    <!-- 見出し -->
    <h1 class="ajax-loading-animation_title">
      Ajax通信デモ
    </h1>

    <!-- 説明文 -->
    <p class="ajax-loading-animation_text">
      ボタンを押すと、通信中だけ読み込み中アニメーションを表示します。
    </p>

    <!-- 通信開始ボタン -->
    <button type="button" class="ajax-loading-animation_button">
      データを取得する
    </button>

    <!-- 読み込み中表示 -->
    <div class="ajax-loading-animation_loading">

      <!-- 回転する読み込み中アイコン -->
      <div class="ajax-loading-animation_loader"></div>

      <!-- 読み込み中テキスト -->
      <p class="ajax-loading-animation_loading-text">
        通信中...
      </p>

    </div>

    <!-- 結果表示 -->
    <div class="ajax-loading-animation_result">
      ここに取得結果が表示されます。
    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:sans-serif;
  background:#f8fafc;
}

/* 幅計算を統一 */
*{
  box-sizing:border-box;
}

/* Ajax通信デモ */
.ajax-loading-animation_wrap{
  width:420px;
  max-width:calc(100% - 32px);
  padding:28px 20px;
  border:1px solid #d1d5db;
  border-radius:20px;
  background:#ffffff;
  text-align:center;
}

/* 見出し */
.ajax-loading-animation_title{
  margin:0 0 12px;
  color:#111827;
  font-size:22px;
  font-weight:700;
}

/* 説明文 */
.ajax-loading-animation_text{
  margin:0 0 20px;
  color:#4b5563;
  font-size:14px;
  line-height:1.8;
}

/* 通信開始ボタン */
.ajax-loading-animation_button{
  padding:12px 18px;
  border:none;
  border-radius:10px;
  background:#2563eb;
  color:#ffffff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

/* 読み込み中表示 */
.ajax-loading-animation_loading{
  display:none;
  margin:22px auto 0;
}

/* 読み込み中表示を表示 */
.ajax-loading-animation_loading.is-show{
  display:block;
}

/* 回転する読み込み中アイコン */
.ajax-loading-animation_loader{
  width:44px;
  height:44px;
  margin:0 auto 12px;
  border:5px solid #dbeafe;
  border-top-color:#2563eb;
  border-radius:50%;
  animation:ajax-loading-animation_spin 1s linear infinite;
}

/* 読み込み中テキスト */
.ajax-loading-animation_loading-text{
  margin:0;
  color:#2563eb;
  font-size:14px;
  font-weight:700;
}

/* 結果表示 */
.ajax-loading-animation_result{
  margin:22px 0 0;
  padding:16px;
  border-radius:12px;
  background:#f8fafc;
  color:#374151;
  line-height:1.8;
}

/* 回転アニメーション */
@keyframes ajax-loading-animation_spin{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}

// 通信開始ボタンを取得
const ajaxLoadingButton = document.querySelector('.ajax-loading-animation_button');

// 読み込み中表示を取得
const ajaxLoadingDisplay = document.querySelector('.ajax-loading-animation_loading');

// 結果表示エリアを取得
const ajaxLoadingResult = document.querySelector('.ajax-loading-animation_result');

// 通信開始ボタンをクリックしたときの処理
ajaxLoadingButton.addEventListener('click', function(){

  // 読み込み中表示を表示
  ajaxLoadingDisplay.classList.add('is-show');

  // 結果表示を通信中の文言へ変更
  ajaxLoadingResult.textContent = 'データを取得しています...';

  // Ajax通信の代わりに待ち時間を再現
  setTimeout(function(){

    // 読み込み中表示を非表示
    ajaxLoadingDisplay.classList.remove('is-show');

    // 通信完了後の結果を表示
    ajaxLoadingResult.textContent = 'Ajax通信が完了しました。取得したデータを表示しています。';

  }, 1800);

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLに通信開始ボタン、読み込み中表示、結果表示エリアを配置し、CSSで読み込み中アニメーションの見た目を作成します。JavaScriptでは、ボタンをクリックしたときに読み込み中表示を出し、通信完了後に非表示へ戻す処理を行います。

sample/
├── index.html
├── style.css
└── script.js

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。このサンプルでは setTimeout を使ってAjax通信中の待ち時間を再現しています。実際にAjax通信へ組み込む場合は、通信開始時に読み込み中表示を表示し、通信完了時に非表示へ切り替えてください。