【JavaScript】ローディング画面をJSだけで実装する

2022年1月12日2023年4月26日

ローディング画面をJSだけで実装する方法です。JavaScriptで必要なHTMLコードやCSSを追加するので、JSファイル以外ひつようありません。

フォーム送信時のちょっとした時間に表示させたりすることができます。

サンプル
コード
- HTML
- JavaScript

サンプル

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ローディング</title>
</head>
<body>
    <input type="button" id="button" name="keep_submit">
    <script src="js/loading.js"></script>
</body>
</html>

JavaScript

document.addEventListener("DOMContentLoaded",function () {
    // イベントリスナーを設定した要素を指定する
    let btn = document.getElementById('button')


    let insertHtml=`
    <!-- loading -->
    <div id="loading" class="is-hide">
        <div class="cv-spinner">
            <span class="spinner"></span>
        </div>
    </div>
    <!-- loading -->
    `
    let insertCSS=`
    <style>
        #loading{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height:100%;
            background: rgba(0,0,0,0.6);
        }
        #loading .cv-spinner {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #loading .spinner {
            width: 80px;
            height: 80px;
            border: 4px #ddd solid;
            border-top: 4px #999 solid;
            border-radius: 50%;
            animation: sp-anime 0.8s infinite linear;
        }
        @keyframes sp-anime {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(359deg); }
        }
        #loading.is-hide{
            display:none;
        }
    </style>
    `


    document.getElementsByTagName('head')[0]
        .insertAdjacentHTML('beforeend', insertCSS);
    document.getElementsByTagName('body')[0]
        .insertAdjacentHTML('afterbegin', insertHtml);
    
    let loading = document.getElementById('loading')
        loading.addEventListener("click",function(){
        hideLoading()
    })

    btn.addEventListener("click",function(){
        showLoading()
    })
});
 
function showLoading(){
    document.getElementById('loading').classList.remove('is-hide')
}

function hideLoading(){
    document.getElementById('loading').classList.add('is-hide')
}

こちらも参考にしていただければと思います。