Auto Loader ローディング画像の表示

アニメーション元：Spinkit

HTML

<body>
<!--========== LOADER ==========-->
<div class="page-loader">
  <div class="spinner"></div>
</div>
<!--========== LOADER ここまで==========-->
<!--========== 以下にコンテンツを記述==========-->
<div>
  <p><img src="../images/largeImage01.jpg" alt=""></p>
  <p><img src="../images/largeImage02.jpg" alt=""></p>
  <p><img src="../images/largeImage03.jpg" alt=""></p>
</div>

CSS

.page-loader {
  position: fixed;
  z-index: 10001;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
}
.spinner {
  width: 40px;
  height: 40px;
  margin: 200px auto;
  background-color: #F24245;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script>
// ページのロード完了時にローディング画面をフェードアウト
$(window).on('load', function() {
  $(".page-loader").fadeOut(600);
});
  
// ページのロードが完了しない場合でも10秒たったら強制的にローディング画面をフェードアウト（オプション）
setTimeout('stoploading()', 10000); 
function stoploading() {
  $(".page-loader").fadeOut('fast');
}
</script>