webサイトの通信中にローディングスピナーを簡単に表示させる方法

fetch() で通信中に「くるくる回るローディング」を表示する方法

fetch() で通信時に「ローディング」を表示する方法を解説します。「くるくる回るスピナーのみ」と「通信中のテキスト付き」の2種類を用意し、好きな方を選べるようにします。また、スクリプトを common.js などの共通ファイル に設置することで、全ページで適用可能にします。

スピナーのみのローディング

まずは「くるくる回るスピナーのみ」を表示する方法です。

document.addEventListener("DOMContentLoaded", function () {
    const loadingOverlay = document.createElement("div");
    loadingOverlay.id = "loading-overlay";
    loadingOverlay.style.position = "fixed";
    loadingOverlay.style.top = "0";
    loadingOverlay.style.left = "0";
    loadingOverlay.style.width = "100%";
    loadingOverlay.style.height = "100%";
    loadingOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
    loadingOverlay.style.display = "none";
    loadingOverlay.style.justifyContent = "center";
    loadingOverlay.style.alignItems = "center";
    loadingOverlay.style.zIndex = "9999";

    const spinner = document.createElement("div");
    spinner.id = "loading-spinner";
    spinner.style.width = "50px";
    spinner.style.height = "50px";
    spinner.style.border = "5px solid rgba(255, 255, 255, 0.3)";
    spinner.style.borderTop = "5px solid #fff";
    spinner.style.borderRadius = "50%";
    spinner.style.animation = "spin 1s linear infinite";

    loadingOverlay.appendChild(spinner);
    document.body.appendChild(loadingOverlay);

    const style = document.createElement("style");
    style.innerHTML = `
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(style);

    function showLoading() {
        loadingOverlay.style.display = "flex";
    }

    function hideLoading() {
        loadingOverlay.style.display = "none";
    }

    const originalFetch = window.fetch;
    window.fetch = function (...args) {
        showLoading();
        return originalFetch(...args)
            .then(response => {
                hideLoading();
                return response;
            })
            .catch(error => {
                hideLoading();
                throw error;
            });
    };
});

「通信中…」テキスト付きローディング

次に「通信中…」というテキストを追加したバージョンです。

document.addEventListener("DOMContentLoaded", function () {
    const loadingOverlay = document.createElement("div");
    loadingOverlay.id = "loading-overlay";
    loadingOverlay.style.position = "fixed";
    loadingOverlay.style.top = "0";
    loadingOverlay.style.left = "0";
    loadingOverlay.style.width = "100%";
    loadingOverlay.style.height = "100%";
    loadingOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
    loadingOverlay.style.display = "none";
    loadingOverlay.style.justifyContent = "center";
    loadingOverlay.style.alignItems = "center";
    loadingOverlay.style.flexDirection = "column";
    loadingOverlay.style.color = "#fff";
    loadingOverlay.style.fontSize = "18px";
    loadingOverlay.style.zIndex = "9999";

    const spinner = document.createElement("div");
    spinner.id = "loading-spinner";
    spinner.style.width = "50px";
    spinner.style.height = "50px";
    spinner.style.border = "5px solid rgba(255, 255, 255, 0.3)";
    spinner.style.borderTop = "5px solid #fff";
    spinner.style.borderRadius = "50%";
    spinner.style.animation = "spin 1s linear infinite";

    const text = document.createElement("p");
    text.innerText = "通信中...";

    loadingOverlay.appendChild(spinner);
    loadingOverlay.appendChild(text);
    document.body.appendChild(loadingOverlay);

    const style = document.createElement("style");
    style.innerHTML = `
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(style);

    function showLoading() {
        loadingOverlay.style.display = "flex";
    }

    function hideLoading() {
        loadingOverlay.style.display = "none";
    }

    const originalFetch = window.fetch;
    window.fetch = function (...args) {
        showLoading();
        return originalFetch(...args)
            .then(response => {
                hideLoading();
                return response;
            })
            .catch(error => {
                hideLoading();
                throw error;
            });
    };
});

common.js などに適用する方法

このスクリプトは `common.js` などの共通スクリプトに設置することで、全ページで適用 することが可能です。ファイル名を `loading.js` ではなく、`common.js` に変更しても問題ありません。

functions.php にスクリプトを登録

WordPress の `functions.php` にスクリプトを登録することで、全ページで適用できます。

function enqueue_custom_scripts() {
    wp_enqueue_script('common-js', get_template_directory_uri() . '/js/common.js', [], '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

まとめ

処理	説明
スピナーのみ	くるくる回るローディングのみ表示
「通信中…」テキスト付き	スピナー + 「通信中…」のテキスト表示
common.js に適用	共通スクリプトに設置すれば全ページに適用可能
functions.php に登録	WordPress に適用する場合は `functions.php` に追加

これで fetch() 通信時に「くるくる回るローディング」を表示できます！