アニメーション元: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>