JSFiddle - React, Tailwind, and code Playground

HTML

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

SCSS

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

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');
}); */