Bootstrap 提供了一個內置的 Spinner 組件，可以很容易地為你的項目添加一個簡單的 CSS 動畫效果。要實現 Bootstrap spinner 的動畫效果，請按照以下步驟操作：

1. 首先，確保已將 Bootstrap 4 或更高版本的 CSS 和 JavaScript 文件添加到項目中。可以通過 CDN 引入，也可以通過 npm 安裝。

2. 在 HTML 文件中，創建一個包含 “spinner-border” 類的元素。這將創建一個邊框形狀的 spinner。示例代碼如下：

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

3. 若要自定義 spinner 的大小，可以使用 “spinner-border-sm” 類來創建一個較小的 spinner。示例代碼如下：

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

4. 若要改變 spinner 的顏色，可以添加 Bootstrap 文本顏色類，例如 “text-primary”、“text-success” 等。示例代碼如下：

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

5. 若要創建一個帶有文本的 spinner，可以在 “spinner-border” 元素內部添加一個帶有 “sr-only” 類的 “span” 元素。這將確保屏幕閱讀器用戶能夠獲取到相關信息。示例代碼如下：

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

6. 若要創建一個帶有旋轉動畫的 Grow spinner，可以使用 “spinner-grow” 類。示例代碼如下：

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

7. 若要自定義 Grow spinner 的大小，可以使用 “spinner-grow-sm” 類來創建一個較小的 spinner。示例代碼如下：

<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

8. 若要改變 Grow spinner 的顏色，可以添加 Bootstrap 文本顏色類，例如 “text-primary”、“text-success” 等。示例代碼如下：

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

通過上述步驟，你可以在項目中實現 Bootstrap spinner 的動畫效果。更多關于 Bootstrap spinner 的信息，請參考官方文檔：https://getbootstrap.com/docs/5.0/components/spinners/