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を使用したシンプルなローディング画面が実装されました。この基本的な実装を元に、デザインやアニメーションをカスタマイズして、サイトに適したローディング画面を作成できます。
閲覧ありがとうございました。
関連記事
-
jQueryを使ったスムーススクロールの実装
この記事では、jQueryを使用してこのスムーススクロールを簡単 ...
-
jQueryで簡単に実装!モーダルの作り方
今回はシンプルで効果的なモーダルを作成する方法を紹介します。モー ...
-
jQueryを使って簡単にカウントダウンタイマーを実装しよう
jQueryを利用すると、わずかなコードで素敵なカウントダウンタ ...
-
Swiper.js基本的な使い方カスタマイズ方法
この記事では、Swiper.jsを使用してブログ記事のスライダー ...
-
初心者向け!jQueryを使った簡単なタブメニューの作り方
この記事では、jQueryを使用して簡単に実装できるタブメニュー ...
-
CSS + jQueryハンバーガメニュー実装方法
この記事では、CSSとjQueryを使用して、簡単かつ効果的にハ ...