僅僅使用HTML/CSS實現各類進度條的方式（整理分享）

本篇文章給大家整理了僅僅使用HTML/CSS實現各類進度條的方式，希望對大家有幫助。

本文將介紹如何使用 HTML/CSS 創建各種基礎進度條及花式進度條及其動畫的方式，通過本文，你可能可以學會：

• 通過 HTML 標簽 <meter> 創建進度條

• 通過 HTML 標簽 <progress> 創建進度條

• HTML 實現進度條的局限性

• 使用 CSS 百分比、漸變創建普通進度條及其動畫

• 使用 CSS 創建圓環形進度條

• 使用 CSS 創建球形進度條

• 使用 CSS 創建 3D 進度條

進度條，是我們日常界面中使用的非常多的一種，下面我們來看看。到今天，我們可以如何實現進度條。

HTML 標簽 — meter & progress

這個可能是一些同學還不太清楚的，HTML5 原生提供了兩個標簽 <meter> 和 <progress> 來實現進度條。

• <meter>：用來顯示已知范圍的標量值或者分數值

• <progress>：用來顯示一項任務的完成進度，通常情況下，該元素都顯示為一個進度條

我們分別來看看，首先是 <meter> 標簽：

<p>     <span>完成度：</span>     <meter min="0" max="500" value="350">350 degrees</meter> </p>

meter {     width: 200px; }

樣式如下：

其中，min、max、value 分別表示最大值，最小值與當前值。

無獨有偶，我們再來看看 <progress> 標簽的用法：

<p>     <label for="file">完成度：</label>     <progress max="100" value="70"> 70% </progress> </p>

progress {     width: 200px; }

樣式如下：

其中，max 屬性描述這個 progress 元素所表示的任務一共需要完成多少工作量，value 屬性用來指定該進度條已完成的工作量。

meter & progress 之間的差異

那么問題來了，從上述 Demo 看，兩個標簽的效果一模一樣，那么它們的區別是什么？為什么會有兩個看似一樣的標簽呢？

這兩個元素最大的差異在于語義上的差別。

• <meter>：表示已知范圍內的標量測量值或分數值

• <progress>：表示任務的完成進度

譬如，一個需求當前的完成度，應該使用 <progress>，而如果要展示汽車儀表盤當前的速度值，應該使用 meter。

meter & progress 的局限性

當然，在實際的業務需求中，或者生產環境，你幾乎是不會看到 <meter> 和 <progress> 標簽。

• 我們無法有效的修改 <meter> 和 <progress> 標簽的樣式，譬如背景色，進度前景色等。并且，最為致命的是，瀏覽器默認樣式的表現在不同瀏覽器之間并不一致。這給追求穩定，UI 表現一致的業務來說，是災難性的缺點！

• 我們無法給他添加一些動畫效果、交互效果，因為一些實際的應用場景中，肯定不是簡單的展示一個進度條僅此而已

利用 CSS 實現進度條

因此，在現階段，