


アニメーション元:Spinkit
<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>
.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);
}
}
<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>