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

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

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

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

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

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

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

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

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

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

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

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

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

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

我們分別來(lái)看看，首先是 <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)前值。

無(wú)獨(dú)有偶，我們?cè)賮?lái)看看 <progress> 標(biāo)簽的用法：

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

progress {     width: 200px; }

樣式如下：

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

meter & progress 之間的差異

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

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

• <meter>：表示已知范圍內(nèi)的標(biāo)量測(cè)量值或分?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)境，你幾乎是不會(huì)看到 <meter> 和 <progress> 標(biāo)簽。

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

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

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

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