JSFiddle - React, Tailwind, and code Playground

HTML

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

SCSS

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

JavaScript

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); // ローディング画面を表示させる時間 (ミリ秒) を設定
    });