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

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

• 通過 HTML 標(biāo)簽 <meter> 創(chuàng)建進(jìn)度條

• 通過 HTML 標(biāo)簽 <progress> 創(chuàng)建進(jìn)度條

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

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

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

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

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

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

HTML 標(biāo)簽 — meter & progress

這個(gè)可能是一些同學(xué)還不太清楚的，HTML5 原生提供了兩個(gè)標(biāo)簽 <meter> 和 <progress> 來實(shí)現(xiàn)進(jìn)度條。

• <meter>：用來顯示已知范圍的標(biāo)量值或者分?jǐn)?shù)值

• <progress>：用來顯示一項(xiàng)任務(wù)的完成進(jìn)度，通常情況下，該元素都顯示為一個(gè)進(jìn)度條

我們分別來看看，首先是 <meter> 標(biāo)簽：

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

meter {     width: 200px; }

樣式如下：

其中，min、max、value 分別表示最大值，最小值與當(dāng)前值。

無獨(dú)有偶，我們再來看看 <progress> 標(biāo)簽的用法：

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

progress {     width: 200px; }

樣式如下：

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

meter & progress 之間的差異

那么問題來了，從上述 Demo 看，兩個(gè)標(biāo)簽的效果一模一樣，那么它們的區(qū)別是什么？為什么會有兩個(gè)看似一樣的標(biāo)簽?zāi)兀?/p>

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

• <meter>：表示已知范圍內(nèi)的標(biāo)量測量值或分?jǐn)?shù)值

• <progress>：表示任務(wù)的完成進(jìn)度

譬如，一個(gè)需求當(dāng)前的完成度，應(yīng)該使用 <progress>，而如果要展示汽車儀表盤當(dāng)前的速度值，應(yīng)該使用 meter。

meter & progress 的局限性

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

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

• 我們無法給他添加一些動畫效果、交互效果，因?yàn)橐恍?shí)際的應(yīng)用場景中，肯定不是簡單的展示一個(gè)進(jìn)度條僅此而已

利用 CSS 實(shí)現(xiàn)進(jìn)度條

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