在Bootstrap中，您可以使用內置的spinner組件來表示加載或處理狀態
<head>部分中包含以下鏈接：<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JavaScript --><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
這將顯示一個默認大小且具有邊框樣式的spinner。
.spinner-border-sm類來獲得一個較小的spinner，或者在.spinner-border之后添加.spinner-border-lg類來獲得一個較大的spinner。例如：
<!-- Small spinner -->
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Large spinner -->
<div class="spinner-border spinner-border-lg" role="status">
<span class="visually-hidden">Loading...</span>
</div>
.spinner-border元素添加text-{color}類，其中{color}是Bootstrap支持的顏色名稱（如primary、secondary、success等）。例如：
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
.spinner-grow類與.spinner-grow-sm或.spinner-grow-lg類結合使用。例如：
<!-- Small growing spinner -->
<div class="spinner-grow spinner-grow-sm text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Large growing spinner -->
<div class="spinner-grow spinner-grow-lg text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
現在，您應該已經成功地在Bootstrap項目中實現了spinner組件。根據需要自定義顏色、大小和類型，以適應您的設計。
