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>

ファイル構成と設置方法

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

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

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

コメント