diff --git a/ecs/jskult-webapp/src/static/css/bioStyle.css b/ecs/jskult-webapp/src/static/css/bioStyle.css
index 14fe4ea6..eeb0a079 100644
--- a/ecs/jskult-webapp/src/static/css/bioStyle.css
+++ b/ecs/jskult-webapp/src/static/css/bioStyle.css
@@ -282,25 +282,3 @@ table.tablesorter thead tr .headerSortDown {
 table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
     background-color: #8dbdd8;
 }
-
-#loading {
-    z-index: 10000;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #FFF;
-    overflow-x: hidden;
-    overflow-y: auto;
-    outline: 0;
-    text-align: center;
-    display: none;
-    opacity: 0.7;
-}
-
-#loading_content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-}
\ No newline at end of file
diff --git a/ecs/jskult-webapp/src/static/css/loading.css b/ecs/jskult-webapp/src/static/css/loading.css
new file mode 100644
index 00000000..b4ea2df0
--- /dev/null
+++ b/ecs/jskult-webapp/src/static/css/loading.css
@@ -0,0 +1,21 @@
+#_loading {
+    z-index: 10000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #FFF;
+    overflow-x: hidden;
+    overflow-y: auto;
+    outline: 0;
+    text-align: center;
+    display: none;
+    opacity: 0.7;
+}
+
+#_loading_content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+}
diff --git a/ecs/jskult-webapp/src/templates/_header.html b/ecs/jskult-webapp/src/templates/_header.html
index 01a1521a..c2476734 100644
--- a/ecs/jskult-webapp/src/templates/_header.html
+++ b/ecs/jskult-webapp/src/templates/_header.html
@@ -8,6 +8,7 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
 <link rel="stylesheet" href="/static/css/pagenation.css">
 <link rel="stylesheet" href="/static/css/datepicker.css">
+<link rel="stylesheet" href="/static/css/loading.css">
 <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
 <script src="https://pagination.js.org/dist/2.5.0/pagination.min.js" crossorigin="anonymous"></script>
diff --git a/ecs/jskult-webapp/src/templates/_loading.html b/ecs/jskult-webapp/src/templates/_loading.html
new file mode 100644
index 00000000..9e4cc87f
--- /dev/null
+++ b/ecs/jskult-webapp/src/templates/_loading.html
@@ -0,0 +1,5 @@
+<div id="_loading">
+    <div id="_loading_content">
+        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>{{progress_message}}
+    </div>
+</div>
diff --git a/ecs/jskult-webapp/src/templates/bioSearchList.html b/ecs/jskult-webapp/src/templates/bioSearchList.html
index 6dc40888..6a33c904 100644
--- a/ecs/jskult-webapp/src/templates/bioSearchList.html
+++ b/ecs/jskult-webapp/src/templates/bioSearchList.html
@@ -198,7 +198,7 @@
     <!-- CSV/Excelダウンロードボタン。ここはajaxでやってる -->
     <script type="text/javascript">
         function download(filename, ext) {
-            $(`#loading`).toggle()
+            $(`#_loading`).toggle()
 
             // 検索パラメータを取得
             const formData = $('#bio_download').serializeArray()
@@ -234,7 +234,7 @@
                         }
                         // S3の期限付き署名URLがレスポンスされる
                         window.location.href = data.download_url;
-                        $(`#loading`).toggle();
+                        $(`#_loading`).toggle();
                         $(`#modal_${ext}`).modal('toggle');
                     } catch (e) {
                         alert("エラーが発生しました。:" + e.message);
@@ -243,20 +243,20 @@
                 error: function(jqXHR, textStatus, errorThrown) {
                     const responseJson = jqXHR.responseJSON
                     if (responseJson?.detail?.error === 'db_error') {
-                        $(`#loading`).toggle();
+                        $(`#_loading`).toggle();
                         $(`#modal_${ext}`).modal('toggle');
                         $(`#ErrorModal_DB`).modal('toggle');
                         return
                     }
                     if (responseJson?.detail?.error === 'aws_error') {
-                        $(`#loading`).toggle();
+                        $(`#_loading`).toggle();
                         $(`#modal_${ext}`).modal('toggle');
                         $(`#ErrorModal_AWS`).modal('toggle');
                         return
                     }
 
                     // 予期せぬエラーが発生した場合
-                    $(`#loading`).toggle();
+                    $(`#_loading`).toggle();
                     $(`#modal_${ext}`).modal('toggle');
                     $(`#ErrorModal_Unexpected`).modal('toggle');
                     return
@@ -470,10 +470,8 @@
     {% endwith %}
 
     <!-- ローディング -->
-    <div id="loading">
-        <div id="loading_content">
-            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>出力中...
-        </div>
-    </div>
+    {% with progress_message = '出力中...'%}
+    {% include '_loading.html' %}
+    {% endwith %}
 </body>
 </html>
\ No newline at end of file