CSS、JavaScriptでローディング画面を作る

こんにちは、今回はCSS、JavaScriptでローディング画面を作ってみたいと思います。

ローディング画面とはWEBページを読み込んでいる際に、読み込み経過を見せずに完全に読み込むまでは待機画面(ローディング画面)を表示させるものです。中途半端な状態を見せずに読み込まれたものをみるのでストレスなくみることができます。今回はCSSとJavaScriptで実装してみます。

ローディング画面を作る
1. ローディング画面をとコンテンツをならべる
2. ローディング画面とコンテンツを重ねる
ローディング画面の表示時間を設定する
1. 時間経過後ローディング画面を薄くする

ローディング画面を作る

ローディング画面をとコンテンツをならべる

<body>
    <div id="loading"></div>
    <div class="container">
        <div class="photo">
            <img src="../リンク" alt="">
        </div>
        <div class="photo">
            <img src="../リンク" alt="">
        </div>
        <div class="photo">
            <img src="../リンク" alt="">
        </div>
        ・・・・・・・
    </div>
</body>

#loading {
    height: 100vh;
    transition: 1s;
    background-color: #ff8000;
    z-index: 1000;
}
.container{
    display: flex;
}
.photo{
    flex: 1;
    margin: 10px;
}

HTMLは簡単な内容ですが、<body>の中にloadingと写真が入っているcontainerがはいっています。

今の現状だとオレンジ色の背景と写真ギャラリーがしたに並んでいるとおもいます。

ローディング画面とコンテンツを重ねる

#loading {
    position: fixed;
    height: 100vh;
    transition: 1s;
    background-color: #ff8000;
}

#loadingにposition: fixed;を入れてください。こうすることでブラウザの開いた画面に全体にローディング画面が表示され固定で表示されます。

↑のように写真とオレンジ色の画面が重なります。いまはわかりやすいようにローディング画面を薄くしています。

ローディング画面の表示時間を設定する

時間経過後ローディング画面を薄くする

ローディング画面を消すにはどうすればよいでしょうか？コンテンツを消すというよりか、コンテンツを薄くして見えなくします。

setTimeout(function(){
    const load = document.getElementById('loading');
  load.classList.add('loaded');
}, 3000);

setTimeoutというメソッドをつかいます。細かい仕様は今回省きますが、○○秒後に～という処理を行うためのメソッド（機能）です。

このJavaScriptとcssを追加します。

.loaded{
    opacity: 0;
　　visibility: hidden;
}

.loadedというCSSを追加します。

spinner.classList.add('loaded');

↑のコードではcssのloadedというクラスを追加するように指示しています。

loadedのopacityは０、つまり透明なので見えなくなります。

コードの最後の方に3000とありますが、3000＝3秒なのでお好きな時間に変えてください。

今回は以上です。でもサイトを載せますので参考にしていただければと思います。また