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-running {
	background: #d9e8e7;
	&:before {
		content: 'Loading...';
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translateX(-50%);
		color: #00A5A0;
		font-size: 20px;
		font-weight: bold;
	}
}
.pace {
	-webkit-pointer-events: none;
	pointer-events: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;

	z-index: 2000;
	position: fixed;
	margin: auto;
	top: 12px;
	left: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	height: 29px;
	overflow: hidden;
	background: #FFF;
}
.pace .pace-progress {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;

	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

	display: block;
	position: absolute;
	right: 100%;
	margin-right: -7px;
	width: 100%;
	top: 7px;
	height: 14px;
	font-size: 12px;
	background: #00a5a0;
	color: #00a5a0;
	line-height: 60px;
	font-weight: bold;
	font-family: Helvetica, Arial, "Lucida Grande", sans-serif;

	-webkit-box-shadow: 120px 0 #fff, 240px 0 #fff;
	-ms-box-shadow: 120px 0 #fff, 240px 0 #fff;
	box-shadow: 120px 0 #fff, 240px 0 #fff;
}
.pace .pace-activity {
	position: absolute;
	width: 100%;
	height: 28px;
	z-index: 2001;
	box-shadow: inset 0 0 0 2px #00a5a0, inset 0 0 0 7px #FFF;
	border-radius: 10px;
}

.pace.pace-inactive {
	display: none;
}


.main-content {
		padding: 20px;
		opacity: 0;
		transition: opacity 0.5s ease-in;
	.gallery-list...

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