實現進度動畫的核心方法是使用html的標簽配合css和JavaScript，1. 使用創建基礎結構，設置value和max屬性；2. 通過css重寫樣式并添加transition或@keyframes實現動畫效果；3. 利用javascript動態更新value值以驅動進度變化；4. 結合關鍵幀動畫實現更復雜的視覺效果，如流動漸變。整個過程需注意瀏覽器樣式兼容性，并可通過JS控制動畫的啟停。
實現進度動畫，最常見的方法之一就是使用 HTML 的 標簽配合 CSS 來控制樣式和動畫效果。雖然 本身只能顯示靜態的進度條，但通過 CSS 的過渡（transition）或關鍵幀動畫（@keyframes），可以做出平滑、動態的加載效果。
1. 基本結構：用 創建進度條
HTML 提供了 標簽來表示任務的完成進度。它有兩個主要屬性：
- value：當前進度值
- max：最大進度值（默認是1）
<progress value="0" max="100"></progress>
這是一個最基礎的進度條。瀏覽器會自動渲染成一個帶有填充區域的條形圖，但默認樣式比較單調，想要好看的動畫就得靠 CSS。
立即學習“前端免費學習筆記（深入）”；
2. 美化進度條：用 CSS 修改外觀
不同瀏覽器對 的默認樣式處理不一致，所以想統一外觀，需要通過 CSS 來重寫它的樣式。
progress { appearance: none; width: 100%; height: 20px; background-color: #ddd; border-radius: 10px; overflow: hidden; } progress::-webkit-progress-bar { background-color: #ddd; border-radius: 10px; } progress::-webkit-progress-value { background-color: #4caf50; border-radius: 10px; transition: width 0.5s ease; }
這段代碼做了幾件事：
- 移除了默認樣式（appearance）
- 設置了進度條整體寬度、高度和圓角
- 定義了“已完成”部分的顏色，并加了一個寬度變化的過渡動畫
這樣就可以讓進度條在數值變化時有一個漸變的效果了。
3. 動態更新：用 JavaScript 控制進度
要讓進度條動起來，還得用 JS 動態修改 value 屬性。比如模擬一個從 0 到 100 的加載過程：
<progress id="myProgress" value="0" max="100"></progress> <script> const progress = document.getElementById('myProgress'); let currentValue = 0; const interval = setInterval(() => { if (currentValue >= 100) { clearInterval(interval); } else { currentValue += 1; progress.value = currentValue; } }, 30); // 每30毫秒更新一次 </script>
這個例子中，我們每 30 毫秒增加一次進度值，直到達到 100。因為前面已經給 CSS 加了 transition，所以每次變化都會有一個平滑的過渡動畫。
4. 更豐富的動畫：CSS 關鍵幀 + JS 控制
如果只是簡單的寬度變化不夠炫，還可以用 CSS 動畫來增強視覺效果。比如做一個漸變色流動的動畫：
@keyframes flow { 0% { background-position: 0 0; } 100% { background-position: 100px 0; } } progress::-webkit-progress-value { background-image: linear-gradient(90deg, #4caf50 25%, #81c784 25%, #81c784 50%, #4caf50 50%); background-size: 100px 100%; animation: flow 1s linear infinite; }
這樣就能實現類似“流動”的動畫效果，適用于加載狀態提示等場景。
不過要注意，這種動畫不會隨著進度變化而停止，而是持續播放。如果你希望只在加載過程中出現，可以用 JS 動態添加或移除類名來控制動畫開關。
基本上就這些。用 搭配 CSS 和 JS，可以輕松做出各種風格的進度動畫。雖然有些樣式兼容性需要注意，但只要掌握基本套路，實現起來并不復雜。
