ウェブサイトのユーザビリティを向上させる一つの方法として、ユーザーがリンクをクリックした際にローディングアニメーションを表示することがあります。これにより、ユーザーは次のページがロードされていることを認識でき、操作が反応していることが明確になります。この記事では、JavaScriptを使用してリンクのクリックイベントにローディングアニメーションを挿入する方法を説明します。
ローディングアニメーションのHTMLとCSSを準備する
まず、ローディングアニメーションを表示するためのHTML要素と、そのスタイルを定義します。ここでは、ページ全体を覆うオーバーレイとしてローディングアニメーションを設定します。
<div id="loading">Loading...</div>
<a href="https://example.com">Example Link 1</a>
<a href="https://example.com">Example Link 2</a>
/* ローディングアニメーションのスタイル */
#loading {
display: none; /* 初期状態では非表示 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 9999;
text-align: center;
padding-top: 20%;
}
JavaScriptでリンククリックイベントを設定する
JavaScriptを使って全てのリンクに対してクリックイベントを追加します。これにより、リンクがクリックされた際にローディングアニメーションが表示されるようにします。
document.addEventListener('DOMContentLoaded', function() {
var links = document.querySelectorAll('a');
var loadingDiv = document.getElementById('loading');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
// ローディングアニメーションを表示する
loadingDiv.style.display = 'block';
});
});
});
このスクリプトでは、ページの読み込みが完了した後に、全てのリンク要素(<a>
)を取得し、それぞれにクリックイベントを設定しています。
特定のボタンにしたい場合は、以下のように設定できます。
// 特定のボタンに対してクリックイベントを追加するスクリプト
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('myButton');
var loadingDiv = document.getElementById('loading');
button.addEventListener('click', function(event) {
// ローディングアニメーションを表示する
loadingDiv.style.display = 'block';
});
});
クリックイベントが発生すると、#loading
要素のdisplay
プロパティをblock
に変更してローディングアニメーションを表示します。
![](https://eguweb.jp/wp-content/uploads/スクリーンショット-2024-05-15-18.37.14-1024x505.jpg)
まとめ
以上の手順で、ウェブページ内のリンクをクリックした際にローディングアニメーションを表示することができます。この方法を使用することで、ユーザーに対して次のページがロード中であることを視覚的に知らせることができ、操作に対するフィードバックを提供することができます。
ローディングアニメーションのスタイルや内容は、必要に応じてカスタマイズしてください。