エンジニアブログ

HOME > jquery > jQueryを使用した簡単なローディング画面の実装方法

jQueryを使用した簡単なローディング画面の実装方法

jquery
jQueryを使用した簡単なローディング画面の実装方法

ウェブサイトやアプリケーションのユーザーエクスペリエンスを向上させるために、jQueryを使用して簡単なローディング画面を実装する方法を紹介します。
挙動は本サイトに利用しているので再読み込みをしご確認ください。

HTMLの追加

まず、HTMLにローディング画面の要素を追加します。

<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Loading demo</title>
 </head>
 <body>
  <!-- ローディング画面 -->
  <div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
  </div>

  <!-- jQueryの読み込み -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
 </body>
</html>

CSSでスタイルを追加

ローディング画面にスタイルを追加します。

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

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

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

ローディング自体は、CSSアニメーションで使用されるkeyframeを使用し、アニメーションの始まりから終わりまでのスタイル変化を定義しています。

jQueryで制御

最後にjQueryを使用してローディング画面の表示と非表示を制御します。

$(document).ready(function() {
    // ページが読み込まれたらローディング画面を非表示
    $('#loadingOverlay').fadeOut();
});

最後に

これで、jQueryを使用したシンプルなローディング画面が実装されました。この基本的な実装を元に、デザインやアニメーションをカスタマイズして、サイトに適したローディング画面を作成できます。
閲覧ありがとうございました。

\ シェアしてね！ /

関連記事