JSFiddle - React, Tailwind, and code Playground

HTML

<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>

SCSS

.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;
	}
	
}

JavaScript

// 実装を見やすくするため、ローディングの時間を設定しています
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');
}); */