0から始めるJavaScriptの学習記録　その５　【Lording画面表示】

こんにちは朱夏です。

今回もJavaScriptの勉強を続けていこうと思います。
今回は、画面の読み込み時に表示されるLoading画面を作ってみたいと思います。

実装したい内容は以下です。

読み込み中の回転するアイコン
読み込み後にLoading画面が自動で消える
サイトの内容がフェードイン

それではやっていきます。

コード

先ずはコードを置いておきます。

HTMLからです。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>JavaScript練習</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://kit.fontawesome.com/da0fa6be04.js" crossorigin="anonymous"></script>

     <!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
     <![endif]-->
   </head>
   <body>
      <!----- ヘッダー ----->
      <header>
         <h1>Load画面</h1>
      </header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div id="loadbox">
         <div class="d-flex justify-content-center mt-5 pt-5">
            <div class="text-center loadimg spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
               <span class="sr-only">Loading...</span>
            </div>
            <div>
               <h1>Loading...</h1>
            </div>
         </div>
      </div>
      <div id="contents" class="hidden">
         <img class="fadein" src="ここに画像パス" alt="テスト">
         <!-- ここにimgを複数つくります -->
         <img class="fadein" src="ここに画像パス" alt="テスト">
      </div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
      <script src="js/sample.js"></script>
   </body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript練習</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Load画面</h1>

</header>

<span class="sr-only">Loading...</span>

</div>

<div>

<h1>Loading...</h1>

</div>

</div>

</footer>

</body>

</html>

次にCSSファイルです。

#loadbox {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
}

.hidden {
    display: none;
}

.fadein {
    animation-name: fade-in;
    animation-duration: 3s;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#loadbox {

width: 100%;

height: 100vh;

background-color: #fff;

position: relative;

}

.hidden {

display: none;

}

.fadein {

animation-name: fade-in;

animation-duration: 3s;

}

@keyframes fade-in {

from {

opacity: 0;

}

to {

opacity: 1;

}

最後にJavaScriptファイルです。

'use strict'

var loadbox = document.getElementById('loadbox');
var contents = document.getElementById('contents');

window.addEventListener('load', function () {
    loadbox.style.display = 'none';
    contents.classList.remove('hidden');
});