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

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

• 通過 HTML 標簽 <meter> 創(chuàng)建進度條

• 通過 HTML 標簽 <progress> 創(chuàng)建進度條

• HTML 實現(xiàn)進度條的局限性

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

• 使用 CSS 創(chuàng)建圓環(huán)形進度條

• 使用 CSS 創(chuàng)建球形進度條

• 使用 CSS 創(chuàng)建 3D 進度條

進度條，是我們?nèi)粘＝缑嬷惺褂玫姆浅６嗟囊环N，下面我們來看看。到今天，我們可以如何實現(xiàn)進度條。

HTML 標簽 — meter & progress

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

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

• <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 看，兩個標簽的效果一模一樣，那么它們的區(qū)別是什么？為什么會有兩個看似一樣的標簽呢？

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

• <meter>：表示已知范圍內(nèi)的標量測量值或分數(shù)值

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

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

meter & progress 的局限性

當然，在實際的業(yè)務需求中，或者生產(chǎn)環(huán)境，你幾乎是不會看到 <meter> 和 <progress> 標簽。

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

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

利用 CSS 實現(xiàn)進度條

因此，在現(xiàn)階段，