<div class="loading-content js-loading">
<div class="loader"><p class="loader-text">Loading</p></div>
</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;
}
.loader {
font-size: 18px;
width: 1em;
height: 1em;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
//text-indent: -9999em;を削除
/* text-indent: -9999em; */
-webkit-animation: load5 1.1s infinite ease;
animation: load5 1.1s infinite ease;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
//コード追加 ここから
display: flex;
justify-content: center;
.loader-text {
color: #00a5a0;
font-size: 10px;
font-weight: bold;
}
//コード追加 ここまで
}
@-webkit-keyframes load5 {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #00a5a0, 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.5), -1.8em -1.8em 0 0em rgba(0,165,160, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.7), 1.8em -1.8em 0 0em #00a5a0, 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.5), 1.8em -1.8em 0 0em rgba(0,165,160, 0.7), 2.5em 0em 0 0em #00a5a0, 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.5), 2.5em 0em 0 0em rgba(0,165,160, 0.7), 1.75em 1.75em 0 0em #00a5a0, 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.5), 1.75em 1.75em 0 0em rgba(0,165,160, 0.7), 0em 2.5em 0 0em #00a5a0, -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.5), 0em 2.5em 0 0em rgba(0,165,160, 0.7), -1.8em 1.8em 0 0em #00a5a0, -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.5), -1.8em 1.8em 0 0em rgba(0,165,160, 0.7), -2.6em 0em 0 0em #00a5a0, -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.5), -2.6em 0em 0 0em rgba(0,165,160, 0.7), -1.8em -1.8em 0 0em #00a5a0;
}
}
@keyframes load5 {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #00a5a0, 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.5), -1.8em -1.8em 0 0em rgba(0,165,160, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.7), 1.8em -1.8em 0 0em #00a5a0, 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.5), 1.8em -1.8em 0 0em rgba(0,165,160, 0.7), 2.5em 0em 0 0em #00a5a0, 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.5), 2.5em 0em 0 0em rgba(0,165,160, 0.7), 1.75em 1.75em 0 0em #00a5a0, 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.5), 1.75em 1.75em 0 0em rgba(0,165,160, 0.7), 0em 2.5em 0 0em #00a5a0, -1.8em 1.8em 0 0em rgba(0,165,160, 0.2), -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.5), 0em 2.5em 0 0em rgba(0,165,160, 0.7), -1.8em 1.8em 0 0em #00a5a0, -2.6em 0em 0 0em rgba(0,165,160, 0.2), -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.5), -1.8em 1.8em 0 0em rgba(0,165,160, 0.7), -2.6em 0em 0 0em #00a5a0, -1.8em -1.8em 0 0em rgba(0,165,160, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,165,160, 0.2), 1.8em -1.8em 0 0em rgba(0,165,160, 0.2), 2.5em 0em 0 0em rgba(0,165,160, 0.2), 1.75em 1.75em 0 0em rgba(0,165,160, 0.2), 0em 2.5em 0 0em rgba(0,165,160, 0.2), -1.8em 1.8em 0 0em rgba(0,165,160, 0.5), -2.6em 0em 0 0em rgba(0,165,160, 0.7), -1.8em -1.8em 0 0em #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');
}); */