アニメーション元:Spinkit

HTML
<body>
<!--========== LOADER ==========-->
<div class="page-loader">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </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: rgba(88,171,92,1.00);
}
.spinner {
  margin: 200px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 @-webkit-keyframes sk-stretchdelay {
   0%, 40%, 100% {
  -webkit-transform: scaleY(0.4)
  }
   20% {
  -webkit-transform: scaleY(1.0)
  }
}
 @keyframes sk-stretchdelay {
   0%, 40%, 100% {
   transform: scaleY(0.4);
   -webkit-transform: scaleY(0.4);
  }
  20% {
   transform: scaleY(1.0);
   -webkit-transform: scaleY(1.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('fast');
});
  
// ページのロードが完了しない場合でも10秒たったら強制的にローダーをフェードアウト(オプション)
setTimeout('stoploading()', 10000); 
function stoploading() {
  $(".page-loader").fadeOut('fast');
}
</script>