【jQuery】ローディング画面を実装する完全ガイド｜スピナー・フェード・Ajax連動まで

Webページの読み込み中にローディング画面を表示することで、ユーザーが「止まっているのか？」と不安にならないようにできます。本記事ではページ読み込み中のオーバーレイ・スピナー・Ajax通信中の表示・フェードアウトまで解説します。

1. ページ読み込み中のローディング画面

最もシンプルな実装です。HTMLに#loading要素を置き、ページ読み込み完了（window.load）時にフェードアウトします。

<!-- ローディングオーバーレイ（bodyの先頭に置く） -->
<div id="loading">
  <div class="spinner"></div>
</div>

#loading {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* CSSスピナー */
.spinner {
  width: 48px; height: 48px;
  border: 5px solid #e2e8f0;
  border-top-color: #0284c7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

// window.load: 画像・CSSを含む全リソースの読み込み完了後に発火
$(window).on('load', function () {
  $('#loading').fadeOut(400);
});

// タイムアウト保険: 10秒後には必ず非表示（ネットワーク障害対策）
setTimeout(function () {
  $('#loading').fadeOut(400);
}, 10000);

2. Ajax通信中にローディングを表示する

Ajax通信の前後にshow()/hide()でローディングを制御するパターンです。

function fetchData() {
  $('#loading').show();

  $.ajax({
    url: '/api/data',
    method: 'GET',
    success: function (data) {
      // データを表示する処理
      console.log(data);
    },
    error: function () {
      alert('データの取得に失敗しました');
    },
    complete: function () {
      $('#loading').hide();  // 成功・失敗にかかわらず必ず非表示
    }
  });
}

3. グローバルAjaxイベントで自動制御

ページ内の全Ajaxリクエストに対して自動でローディングを表示したい場合は、グローバルAjaxイベントを使います。

// 全Ajaxリクエスト開始時に自動表示
$(document).on('ajaxStart', function () {
  $('#loading').fadeIn(200);
});

// 全Ajaxリクエスト完了時に自動非表示
$(document).on('ajaxStop', function () {
  $('#loading').fadeOut(400);
});

4. ボタンクリック時のローディング表示

「送信中…」のインジケーターをボタン内に表示するパターンです。

<button id="submit-btn">送信する</button>

$('#submit-btn').on('click', function () {
  var $btn = $(this);
  var originalText = $btn.text();

  $btn.prop('disabled', true)
      .html('<span class="spinner-sm"></span> 送信中...');

  $.ajax({
    url: '/api/submit',
    method: 'POST',
    complete: function () {
      $btn.prop('disabled', false).text(originalText);
    }
  });
});

まとめ

関連記事: jQueryのアニメーション完全ガイド（fadeIn/fadeOut） / jQueryでクリックを禁止・無効化する方法

よくある質問（FAQ）