要實現網頁中的加載動畫，可使用 html 和 css 創建 spinner。1. 創建基礎 spinner：通過 div 元素結合 css 動畫實現旋轉效果；2. 控制顯示與隱藏：用 JavaScript 操作類名控制動畫的顯示與隱藏時機；3. 使用現成組件庫：如 bootstrap 提供內置 spinner 組件，便于快速集成并支持自定義樣式。
加載動畫在網頁中很常見，尤其是在數據請求或頁面切換時用來提示用戶等待。HTML 本身不能單獨實現動畫效果，但結合 CSS 和少量的 HTML 結構就可以輕松做出一個 spinner（旋轉加載圖標）。下面直接說重點。
1. 使用 HTML + CSS 創建基礎 Spinner
要創建一個簡單的加載動畫，最常用的方式是用 div 元素作為容器，再通過 CSS 設置動畫效果。比如做一個經典的“轉圈圈”spinner：
<div class="spinner"></div>
對應的 CSS：
立即學習“前端免費學習筆記（深入）”；
.spinner { width: 40px; height: 40px; border: 4px solid #ccc; border-top-color: #333; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
這樣就能看到一個不斷旋轉的小圓圈。你可以調整 width、height 和邊框顏色來改變外觀。
2. 如何控制加載動畫的顯示與隱藏
實際開發中，加載動畫通常是在某些操作進行時顯示，完成后隱藏。可以通過 JavaScript 控制類名或者樣式來實現。
例如：
<div id="spinner" class="spinner hidden"></div>
CSS 中添加：
.hidden { display: none; }
JavaScript 控制顯示：
// 顯示 document.getElementById('spinner').classList.remove('hidden'); // 隱藏（例如在某個異步請求完成后） setTimeout(() => { document.getElementById('spinner').classList.add('hidden'); }, 2000);
這個例子中用了 setTimeout 模擬異步操作完成后的隱藏動作，實際中你可能會在 ajax 請求結束或者圖片加載完成后觸發隱藏邏輯。
3. 使用現成組件庫快速實現
如果你不想從頭寫，也可以使用一些前端框架或 ui 庫提供的加載組件，比如 bootstrap、Ant Design、Element Plus 等都有內置的 spinner 組件。
以 Bootstrap 為例：
<div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div>
只需要引入 Bootstrap 的 CSS 文件即可使用，非常方便。
當然，這些組件也支持自定義大小和顏色，適合需要快速集成又不想折騰樣式的項目。
基本上就這些。自己實現不復雜，但容易忽略細節，比如動畫流暢性、隱藏時機等。根據項目需求選擇手動寫還是用現成方案都可以。
