ネィティブなJsとCSS3でローディング画面を作成

なぜネィティブなJavascriptを選ぶのか？
・ロード画面なのでできるだけ早く呼びたい→ヘッド部分で呼み込みたい
・ｊQueryなどライブラリをヘッドで呼び出すと無駄な時間を使うことになる→そもそもJsをヘッダにできるだけ書きたくない

こういった理由です。
ある程度ロードした状態からロード画面が出てきても意味がないので。

head閉じ直前に以下を追加する。

<style>
            #loading-bg{
                position: fixed;
                width: 100%;
                height: 100%;
                top: 0px;
                left: 0px;
                background-color: #fff;
                z-index: 9999;
            }
            .loading {
                position: fixed;
                top: 50%;
                left: 50%;
                width: 60px;
                height: 60px;
                margin-top: -30px;
                margin-left: -30px;
                border: 5px solid rgba(0,0,0,0.4);
                border-top-color: rgba(0,0,0,0.9);
                border-radius: 50%;
                animation: spin 1.2s linear 0s infinite;
            }
            @keyframes spin {
                0% {transform: rotate(0deg);}
                100% {transform: rotate(360deg);}
            }
</style>

<script>
            window.onload = function () {
                document.getElementById('loading-bg').remove();
            };
</script>

body開始すぐに

<script>
            var e = document.createElement('div');
            e.innerHTML = '<div class="loading"></div>';
            e.id = 'loading-bg';
            document.body.appendChild(e);
</script>

これでOKです。

CSS3でロードのぐるぐる部分を作成して、
Javascriptで全面を覆うhtmlを作成、ロード完了後にそれを削除。
といった動きとなります。

javascriptが動かない人には特に何も発生しない仕様です。

参考
css だけのロード画面
ページ読み込み中にローディング画面を表示する
【脱jQuery】JavaScriptをネイティブで書くときのあれこれTips
HTMLの読み込みが完了してから実行
ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ
[Javascript] 動的に要素を作成する為のあれこれ
【JavaScript】bodyに要素を追加
ネイティブ JavaScript の remove メソッド