spinners

</div>

<span class="loader-text">資料載入中....</span>

</div>

javascript

function showLoading() {

document.getElementById('loading').style.display = 'block';

}

function hideLoading() {

document.getElementById('loading').style.display = 'none';

}

這段程式碼使用了 HTML 和 Bootstrap 來建立一個載入指示器。載入指示器包含一個旋轉圖示和一條訊息，預設狀態下是隱藏的（style="display:none;"）。當資料正在載入時，可以將 display 樣式更改為 block 來顯示載入指示器。

以下是程式碼的詳細說明：

<div id="loading" style="display:none;">：這個外部的 div 具有 id "loading"，並且預設是隱藏的。
<div class="spinner-border text-primary" role="status">：這個 div 包含旋轉圖示。spinner-border 是 Bootstrap 的一個類別，用來建立旋轉邊框動畫，text-primary 則是設定為主要顏色。
<span class="visually-hidden">載入中...</span>：這個 span 是隱藏的，但提供了屏幕閱讀器用的文字 "載入中..."。
<span class="loader-text">資料載入中....</span>：這個 span 顯示了文字 "資料載入中...."。

JQuery

<!-- loading

$("#loading").show();

$("#loading").hide();

-->

<span class="visually-hidden">Loading...</span>

</div>

<div>資料處理中...</div>

</div>

指定「訂單送出」submit-order

// loading start

document.getElementById('submit-order').innerHTML = `<div class="d-flex align-items-center">

<span class="visually-hidden">Loading...</span>

</div>

<div>資料處理中...</div>

</div>`;