<div class="loading-content js-loading"> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" class="loading-inner"> <text x="50%" y="50%" text-anchor="middle" dy="8" class="loading-text">LOADING</text> </svg> </div> <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>
.loading-content { position: fixed; width: 100vw; height: 100vh; background-color: #d9e8e7; transition: all ease-in-out 1s; &.js-loaded { opacity: 0; visibility: hidden; } .loading-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loading-text { font-size: 24px; font-weight: bold; fill: none; stroke: #00A5A0; stroke-dasharray: 100; stroke-dashoffset: 100; // 実装を見やすくするため、アニメーションをゆっくり目に設定しています animation: dashAnimation 3s linear forwards, fillAnimation 2s linear 2s forwards; // 通常はコチラのコード /* animation: dashAnimation 1s linear forwards, fillAnimation 0.5s linear 0.5s forwards; */ transform-origin: center; @keyframes dashAnimation { to { stroke-dashoffset: 0; } } @keyframes fillAnimation { from { fill: transparent; } to { fill: #00A5A0; } } } } .main-content { padding: 20px; .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; } }
// 実装を見やすくするため、ローディングの時間を設定しています const loading = document.querySelector('.js-loading'); window.addEventListener('load', () => { setTimeout(() => { loading.classList.add('js-loaded'); }, 5000); // ミリ秒単位で遅延時間を指定 }); // ローディング時間設定なしはコチラのコード /* const loading = document.querySelector('.js-loading'); window.addEventListener('load', () => { loading.classList.add('js-loaded'); }); */