<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 { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace.pace-active { position: fixed; width: 100vw; height: 100vh; background-color: #d9e8e7; } .pace.pace-inactive .pace-progress { opacity: 0; transition: opacity 0.5s ease; } .pace .pace-progress { position: fixed; z-index: 2000; top: 50%; left: 50%; transform: translate(-50%, -50%); } .pace .pace-progress:after { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: attr(data-progress-text); font-family: "Helvetica Neue", sans-serif; font-weight: bold; font-size: 5rem; line-height: 1; text-align: center; color: #00A5A0; } .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); // ローディング画面を表示させる時間 (ミリ秒) を設定 });