站長資訊網(wǎng)本篇文章給大家整理了僅僅使用HTML/CSS實(shí)現(xiàn)各類進(jìn)度條的方式，希望對(duì)大家有幫助。
本文將介紹如何使用 HTML/CSS 創(chuàng)建各種基礎(chǔ)進(jìn)度條及花式進(jìn)度條及其動(dòng)畫的方式，通過本文，你可能可以學(xué)會(huì)：
-
通過 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)度條及其動(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，下面我們來看看。到今天，我們可以如何實(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ú)有偶，我們?cè)賮砜纯?<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ū)別是什么？為什么會(huì)有兩個(gè)看似一樣的標(biāo)簽?zāi)兀?/p>
這兩個(gè)元素最大的差異在于語義上的差別。
-
<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)簽。
-
我們無法有效的修改 <meter> 和 <progress> 標(biāo)簽的樣式，譬如背景色，進(jìn)度前景色等。并且，最為致命的是，瀏覽器默認(rèn)樣式的表現(xiàn)在不同瀏覽器之間并不一致。這給追求穩(wěn)定，UI 表現(xiàn)一致的業(yè)務(wù)來說，是災(zāi)難性的缺點(diǎn)！
-
我們無法給他添加一些動(dòng)畫效果、交互效果，因?yàn)橐恍?shí)際的應(yīng)用場(chǎng)景中，肯定不是簡(jiǎn)單的展示一個(gè)進(jìn)度條僅此而已
利用 CSS 實(shí)現(xiàn)進(jìn)度條
因此，在現(xiàn)階段，
