<script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script> <section class="main-content"> <p class="main-text">ここはコンテンツ領域です</p> <ul class="gallery-list"> <li class="gallery-list-item"><img src="https://picsum.photos/id/474/400/247/" alt="" width="400" height="247"></li> <li class="gallery-list-item"><img src="https://picsum.photos/id/402/400/247/" alt="" width="400" height="247"></li> <li class="gallery-list-item"><img src="https://picsum.photos/id/563/400/247/" alt="" width="400" height="247"></li> <li class="gallery-list-item"><img src="https://picsum.photos/id/320/400/247/" alt="" width="400" height="247"></li> <li class="gallery-list-item"><img src="https://picsum.photos/id/352/400/247/" alt="" width="400" height="247"></li> <li class="gallery-list-item"><img src="https://picsum.photos/id/351/400/247/" alt="" width="400" height="247"></li> <li class="gallery-list-item"><img src="https://picsum.photos/id/379/400/247/" alt="" width="400" height="247"></li> <li class="gallery-list-item"><img src="https://picsum.photos/id/405/400/247/" alt="" width="400" height="247"></li> <li class="gallery-list-item"><img src="https://picsum.photos/id/519/400/247/" alt="" width="400" height="247"></li> </ul> </section>
.pace-running { background: #d9e8e7; &:before { content: 'Loading...'; position: absolute; top: 40%; left: 50%; transform: translateX(-50%); color: #00A5A0; font-size: 20px; font-weight: bold; } } .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; z-index: 2000; position: fixed; margin: auto; top: 12px; left: 0; right: 0; bottom: 0; width: 50%; height: 29px; overflow: hidden; background: #FFF; } .pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); display: block; position: absolute; right: 100%; margin-right: -7px; width: 100%; top: 7px; height: 14px; font-size: 12px; background: #00a5a0; color: #00a5a0; line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; -webkit-box-shadow: 120px 0 #fff, 240px 0 #fff; -ms-box-shadow: 120px 0 #fff, 240px 0 #fff; box-shadow: 120px 0 #fff, 240px 0 #fff; } .pace .pace-activity { position: absolute; width: 100%; height: 28px; z-index: 2001; box-shadow: inset 0 0 0 2px #00a5a0, inset 0 0 0 7px #FFF; border-radius: 10px; } .pace.pace-inactive { display: none; } .main-content { padding: 20px; opacity: 0; transition: opacity 0.5s ease-in; .gallery-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .gallery-list-item { width: calc(calc(100% - 20px) / 3); img { display: block; width: 100%; height: auto; } } .main-text { margin: 0 0 10px; font-size: 18px; font-weight: bold; text-align: center; } }
document.addEventListener("DOMContentLoaded", function() { // 実装を見やすくするため、ローディング進捗の時間を長めに設定しています ここから Pace.start({ ajax: { trackMethods: ["GET", "POST"], // Ajaxリクエストのメソッドをトラッキングする }, startOnPageLoad: true, // ページロード時に進捗を開始する restartOnPushState: true, // ページ遷移時に進捗をリスタートする minTime: 3000, // 最低でも進捗を3秒間表示する }); // 実装を見やすくするため、ローディング進捗の時間を長めに設定しています ここまで // ローディング画面を表示させるための遅延処理を追加 setTimeout(function() { // ローディング画面を非表示にする var loadingScreen = document.querySelector(".pace.pace-inactive"); loadingScreen.style.opacity = "1"; // フェードインさせるための追加スタイルを適用 var mainContent = document.querySelector(".main-content"); mainContent.style.opacity = "1"; }, 3000); // ローディング画面を表示させる時間 (ミリ秒) を設定 });