【JavaScript】リンクをクリックしたときにローディングアニメーションが表示されるようにしたい

JavaScript(ジャバスクリプト)

Screenshot

2024.07.03

この記事は約4分で読めます。

ウェブサイトのユーザビリティを向上させる一つの方法として、ユーザーがリンクをクリックした際にローディングアニメーションを表示することがあります。これにより、ユーザーは次のページがロードされていることを認識でき、操作が反応していることが明確になります。この記事では、JavaScriptを使用してリンクのクリックイベントにローディングアニメーションを挿入する方法を説明します。

ローディングアニメーションのHTMLとCSSを準備する
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に変更してローディングアニメーションを表示します。