JavaScriptライブラリを使って「お待ちください、読み込み中…」を表示する
jQueryで「お待ちください、読み込み中…」アニメーションを作成する方法
画像アニメーションを使用する
HTML
<div id="loading">
<img src="loading.gif" alt="読み込み中">
</div>
CSS
#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
JavaScript
$(document).ready(function() {
// 読み込み開始時にアニメーションを表示
$(document).ajaxStart(function() {
$('#loading').show();
});
// 読み込み完了時にアニメーションを非表示
$(document).ajaxStop(function() {
$('#loading').hide();
});
});
上記は、GIF画像を使用してアニメーションを表示する例です。loading.gif
は、お好みのアニメーション画像に置き換えてください。
CSSアニメーションを使用する
<div id="loading">
<div class="spinner"></div>
</div>
#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
#loading .spinner {
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-radius: 50%;
border-top-color: #000;
animation: spinner 1s linear infinite;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
$(document).ready(function() {
// 読み込み開始時にアニメーションを表示
$(document).ajaxStart(function() {
$('#loading').show();
});
// 読み込み完了時にアニメーションを非表示
$(document).ajaxStop(function() {
$('#loading').hide();
});
});
上記は、CSSアニメーションを使用してアニメーションを表示する例です。spinner
クラスの要素に、好きなアニメーションを適用してください。
上記以外にも、様々な方法でアニメーションを作成することができます。例えば、以下のような方法があります。
- SVGアニメーションを使用する
- JavaScriptライブラリを使用する
自分の目的に合った方法を選択してください。
補足
- 上記のコードは基本的な例です。必要に応じて、カスタマイズしてください。
- アニメーションの表示位置や表示時間は、CSSで調整できます。
- アニメーションを表示するタイミングは、
ajaxStart
イベントやajaxStop
イベント以外にも、好きなタイミングで設定できます。
画像アニメーションを使用する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loading">
<img src="loading.gif" alt="読み込み中">
</div>
<script src="script.js"></script>
</body>
</html>
#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
$(document).ready(function() {
// 読み込み開始時にアニメーションを表示
$(document).ajaxStart(function() {
$('#loading').show();
});
// 読み込み完了時にアニメーションを非表示
$(document).ajaxStop(function() {
$('#loading').hide();
});
});
CSSアニメーションを使用する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loading">
<div class="spinner"></div>
</div>
<script src="script.js"></script>
</body>
</html>
#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
#loading .spinner {
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-radius: 50%;
border-top-color: #000;
animation: spinner 1s linear infinite;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
$(document).ready(function() {
// 読み込み開始時にアニメーションを表示
$(document).ajaxStart(function() {
$('#loading').show();
});
// 読み込み完了時にアニメーションを非表示
$(document).ajaxStop(function() {
$('#loading').hide();
});
});
動作確認
上記のコードをHTMLファイルとCSSファイル、JavaScriptファイルに保存し、ブラウザで開くと、「お待ちください、読み込み中…」というアニメーションが表示されます。
カスタマイズ
上記
jQueryで「お待ちください、読み込み中…」アニメーションを作成する他の方法
テキストアニメーションを使用する
<div id="loading">
<p>お待ちください、読み込み中...</p>
</div>
#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
#loading p {
font-size: 20px;
font-weight: bold;
color: #000;
animation: fade-in 1s linear infinite;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
$(document).ready(function() {
// 読み込み開始時にアニメーションを表示
$(document).ajaxStart(function() {
$('#loading').show();
});
// 読み込み完了時にアニメーションを非表示
$(document).ajaxStop(function() {
$('#loading').hide();
});
});
上記は、テキストアニメーションを使用してアニメーションを表示する例です。p
要素のfont-size
やfont-weight
、color
などを変更して、アニメーションの見た目をカスタマイズできます。
SVGアニメーションを使用する
<div id="loading">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="10" fill="none" />
</svg>
</div>
#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
#loading svg {
width: 100px;
height: 100px;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
$(document).ready(function() {
// 読み込み開始時にアニメーションを表示
$(document).ajaxStart(function() {
$('#loading').show();
});
// 読み込み完了時にアニメーションを非表示
$(document).ajaxStop(function() {
$('#loading').hide();
});
});
JavaScriptライブラリを使用する
jQuery以外にも、アニメーションを作成
jquery animation