僅僅使用 HTML/CSS 實(shí)現(xiàn)進(jìn)度條的 N 種方式
Hello 大家好，我是 Coco，今天給大家?guī)?lái)有關(guān) HTML/CSS 實(shí)現(xiàn)進(jìn)度條的各種~
本文將介紹如何使用 HTML/CSS 創(chuàng)建各種基礎(chǔ)進(jìn)度條及花式進(jìn)度條及其動(dòng)畫(huà)的方式，通過(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)畫(huà)
- 使用 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)?
這兩個(gè)元素最大的差異在于語(yǔ)義上的差別。
- <meter>：表示已知范圍內(nèi)的標(biāo)量測(cè)量值或分?jǐn)?shù)值
- <progress>：表示任務(wù)的完成進(jìn)度
譬如，一個(gè)需求當(dāng)前的完成度，應(yīng)該使用 <progress>，而如果要展示汽車(chē)儀表盤(pán)當(dāng)前的速度值，應(yīng)該使用 meter。
meter & progress 的局限性
當(dāng)然，在實(shí)際的業(yè)務(wù)需求中，或者生產(chǎn)環(huán)境，你幾乎是不會(huì)看到 <meter> 和 <progress> 標(biāo)簽。
和我們?cè)谶@篇文章中 -- 《利用 datalist 實(shí)現(xiàn)可過(guò)濾下拉選框》[1] 講到的原因類(lèi)似，在于：
1.我們無(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)！
2.我們無(wú)法給他添加一些動(dòng)畫(huà)效果、交互效果，因?yàn)橐恍?shí)際的應(yīng)用場(chǎng)景中，肯定不是簡(jiǎn)單的展示一個(gè)進(jìn)度條僅此而已
利用 CSS 實(shí)現(xiàn)進(jìn)度條
因此，在現(xiàn)階段，更多的還是使用一些 CSS 的方式去實(shí)現(xiàn)進(jìn)度條。
使用百分比實(shí)現(xiàn)進(jìn)度條
最為常見(jiàn)的一種方式是使用背景色配合百分比的方式制作進(jìn)度條。
最簡(jiǎn)單的一個(gè) DEMO：
- <div class="g-container">
- <div class="g-progress"></div>
- </div>
- .g-container {
- width: 240px;
- height: 25px;
- border-radius: 25px;
- background: #eee;
- }
- .g-progress {
- width: 50%;
- height: inherit;
- border-radius: 25px 0 0 25px;
- background: #0f0;
- }
效果如下：
這種方式優(yōu)勢(shì)在于使用簡(jiǎn)單，實(shí)際進(jìn)度可以非常方便的傳遞進(jìn) CSS 中
1.利用 HTML style 屬性填寫(xiě)完整的 width 值，譬如 <div class="g-progress" style="width: 50%"></div>
3.完全的自定義樣式，以及可以輕松的添加輔助豐富的動(dòng)畫(huà)和交互效果
譬如給 g-progress 添加一個(gè)過(guò)渡效果：
- .g-progress {
- // ...
- transition: width .2s linear;
- }
這樣，每次進(jìn)度變化，都是一個(gè)動(dòng)態(tài)的過(guò)渡過(guò)程：
或者，漸變前景色，修改 background: #0f0 為 background: linear-gradient(90deg, #0f0, #0ff)：
單標(biāo)簽使用漸變實(shí)現(xiàn)
當(dāng)然，可以看到，我們上面使用的是兩個(gè)標(biāo)簽的結(jié)構(gòu)：
- <div class="g-container">
- <div class="g-progress"></div>
- </div>
摳門(mén)點(diǎn)，我們還可以僅僅利用一個(gè)標(biāo)簽去完成這個(gè)事情，主要借助了漸變?nèi)ネ瓿蛇@個(gè)事情：
- <div class="g-progress"></div>
- .g-progress {
- width: 240px;
- height: 25px;
- border-radius: 25px;
- background: linear-gradient(90deg, #0f0, #0ff 70%, transparent 0);
- border: 1px solid #eee;
- }
結(jié)果如下：
同樣的，我們可以利用 HTML style 屬性填寫(xiě)完整的 background 值傳遞實(shí)際百分比，當(dāng)然，這里更推薦使用 CSS 自定義屬性傳值：
- <div class="g-progress" style="--progress: 50%"></div>
- .g-progress {
- background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
- }
熟悉 CSS 的同學(xué)會(huì)發(fā)現(xiàn)一個(gè)目前這種方式的弊端，在于當(dāng)修改 --progress 的值的時(shí)候，即便給 .g-progress 添加了 transition，也不會(huì)有過(guò)渡動(dòng)畫(huà)效果。
原因在于，CSS 中，漸變(諸如 linear-gradinet、radial-gradient、conic-gradient)都是不支持過(guò)渡變換的。
所以，在這里，為了實(shí)現(xiàn)動(dòng)畫(huà)效果，我們可以借助 CSS @property，改造下我們的代碼：
- <div class="g-progress" style="--progress: 70%"></div>
- @property --progress {
- syntax: '<percentage>';
- inherits: false;
- initial-value: 0%;
- }
- .g-progress {
- margin: auto;
- width: 240px;
- height: 25px;
- border-radius: 25px;
- background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
- border: 1px solid #eee;
- transition: .3s --progress;
- }
借助 CSS @property 的特性，我們?cè)趩螛?biāo)簽下也是可以實(shí)現(xiàn)動(dòng)畫(huà)效果的：
CodePen Demo -- 單標(biāo)簽的進(jìn)度條效果[2]
對(duì) CSS @property 還不了解的，可以看看我的這篇文章 -- CSS @property，讓不可能變可能[3]
圓弧形進(jìn)度條
當(dāng)然，進(jìn)度條不可能只有直線型的。還有非常多其他類(lèi)型的，下面我們首先來(lái)看看圓弧型的進(jìn)度條。
在今天，我們可以使用 CSS 快速的創(chuàng)建圓弧形式的進(jìn)度條，類(lèi)似于這樣：
核心就是使用角向漸變 background: conic-gradient()：
- <div class="g-progress"></div>
- .g-progress {
- width: 160px;
- height: 160px;
- border-radius: 50%;
- background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
- }
利用角向漸變 background: conic-gradient()，我們可以輕松實(shí)現(xiàn)這樣一個(gè)餅圖：
接下來(lái)就是鏤空中間部分。
傳統(tǒng)的想法是，在中間疊加一個(gè)圓，然而，這樣做的一個(gè)極大的弊端在于，如果我們的背景不是純色而是漸變色，就不適用了，譬如這樣：
那么如何鏤空中間，使得中間部分透明呢?這里我們可以巧妙的通過(guò) mask 屬性達(dá)到目的，鏤空中間：
- .g-progress {
- background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
- + mask: radial-gradient(transparent, transparent 50%, #000 50%, #000 0);
- }
這樣，我們就輕松的鏤空了中間，即便背景不是純色也無(wú)妨。
CodePen Demo - 角向漸變實(shí)現(xiàn)圓弧形進(jìn)度條[4]
基于此拓展，還可以實(shí)現(xiàn)多色的圓弧型進(jìn)度條：
- .g-progress {
- width: 160px;
- height: 160px;
- border-radius: 50%;
- mask: radial-gradient(transparent, transparent 50%, #000 51%, #000 0);
- background:
- conic-gradient(
- #FFCDB2 0, #FFCDB2 25%,
- #B5838D 25%, #B5838D 50%,
- #673ab7 50%, #673ab7 90%,
- #ff5722 90.2%, #ff5722 100%
- );
- }
當(dāng)然，這個(gè)可能不像進(jìn)度條，更類(lèi)似于餅圖?
角向漸變實(shí)現(xiàn)圓弧進(jìn)度條的局限性
當(dāng)然，這個(gè)方法有兩個(gè)弊端。
當(dāng)然進(jìn)度百分比不是類(lèi)似于 0°、90°、180°、270°、360° 這類(lèi)數(shù)字時(shí)，使用角向漸變時(shí)，不同顏色間的銜接處會(huì)有明顯的鋸齒。
看個(gè)例子 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)：
遇到此類(lèi)問(wèn)題的解決方案是，在銜接處，適當(dāng)留出一些漸變空間，我們簡(jiǎn)單的改造一下上述角向漸變代碼：
- {
- - background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
- + background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
- }
仔細(xì)看上面的代碼，將從 27% 到 27% 的一個(gè)變化，改為了 從 27% 到 27.2%，這多出來(lái)的 0.2% 就是為了消除鋸齒的，實(shí)際改變后的效果：
具體使用的使用，可以多調(diào)試選取既不會(huì)看出模糊，又能盡可能消除鋸齒的一個(gè)范圍幅度。
對(duì)于開(kāi)頭和結(jié)尾需要圓形的圓弧進(jìn)度條實(shí)現(xiàn)起來(lái)較為麻煩
還有一種情況，實(shí)際使用中，要求的是首尾帶圓形的圓弧進(jìn)度條，例如下圖所示：
當(dāng)然，這種情況當(dāng)然進(jìn)度條顏色是純色也是可以解決的，我們通過(guò)在在首尾處疊加兩個(gè)小圓圈即可實(shí)現(xiàn)這種效果。
如果進(jìn)度條是漸變色的話，這種進(jìn)度條則需要借助 SVG/Canvas 實(shí)現(xiàn)了。
上述完整的帶圓角的圓弧進(jìn)度條，你可以戳這里看完整源碼 -- CodePen Demo -- 首尾為圓形的圓弧進(jìn)度條[5]
球形進(jìn)度條
球形進(jìn)度條也是比較常見(jiàn)的，類(lèi)似于下面這種：
對(duì)于球形進(jìn)度條，其實(shí)核心在于使用 CSS 實(shí)現(xiàn)中間部分的波浪效果。
這個(gè)技巧到今天應(yīng)該已經(jīng)被大伙熟知了，就不過(guò)多贅述，一圖勝千言，可以使用滾動(dòng)大圓的方式，類(lèi)似于這樣：
容器應(yīng)用 overflow: hidden，就能得到這樣的效果：
對(duì)這個(gè)技巧還不理解，可以猛擊這篇文章：純 CSS 實(shí)現(xiàn)波浪效果![6]
應(yīng)用這個(gè)技巧，只需要簡(jiǎn)單的封裝，控制一下球形容器表示進(jìn)度 0% - 100% 時(shí)的波浪的高度即可。我們就能得到從 0% - 100% 的動(dòng)畫(huà)效果。
完整的代碼大概如下：
- <div class="container">
- <div class="wave-change"></div>
- <div class="wave"></div>
- </div>
- .container {
- width: 200px;
- height: 200px;
- border: 5px solid rgb(118, 218, 255);
- border-radius: 50%;
- overflow: hidden;
- }
- .wave-change {
- position: absolute;
- width: 200px;
- height: 200px;
- left: 0;
- top: 0;
- animation: change 12s infinite linear;
- &::before,
- &::after{
- content: "";
- position: absolute;
- width: 400px;
- height: 400px;
- top: 0;
- left: 50%;
- background-color: rgba(255, 255, 255, .6);
- border-radius: 45% 47% 43% 46%;
- transform: translate(-50%, -70%) rotate(0);
- animation: rotate 7s linear infinite;
- z-index: 1;
- }
- &::after {
- border-radius: 47% 42% 46% 44%;
- background-color: rgba(255, 255, 255, .8);
- transform: translate(-50%, -70%) rotate(0);
- animation: rotate 9s linear -4s infinite;
- z-index: 2;
- }
- }
- .wave {
- position: relative;
- width: 200px;
- height: 200px;
- background-color: rgb(118, 218, 255);
- border-radius: 50%;
- }
- p {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-size: 36px;
- color: #000;
- z-index: 10;
- }
- @keyframes rotate {
- to {
- transform: translate(-50%, -70%) rotate(360deg);
- }
- }
- @keyframes change {
- from {
- top: 80px;
- }
- to {
- top: -120px;
- }
- }
完整的代碼示例，你可以戳這里：
- CodePen Demo -- Pure Css Wave Progress bar[7]
- CodePen Demo -- Pure Css Wave Progress bar Animation[8]
3D 進(jìn)度條
嗯，下面這個(gè) 3D 進(jìn)度條需要對(duì) CSS 3D 有基本的掌握。
你可以先看看這篇文章 -- 奇思妙想 CSS 3D 動(dòng)畫(huà) | 僅使用 CSS 能制作出多驚艷的動(dòng)畫(huà)?[9]
它主要是借助了一個(gè) 3D 立方體。接下來(lái)我們來(lái)實(shí)現(xiàn)一個(gè)立方體進(jìn)度條~
首先，實(shí)現(xiàn)一個(gè)立方體，結(jié)構(gòu)如下：
- <div class="demo-cube perspective">
- <ul class="cube">
- <li class="top"></li>
- <li class="bottom"></li>
- <li class="front"></li>
- <li class="back"></li>
- <li class="right"></li>
- <li class="left"></li>
- </ul>
- </div>
我們可以把這個(gè)立方體想象成一個(gè)立體的進(jìn)度條容器，通過(guò)控制 6 面的顏色，我們可以巧妙的得到一種 3D 進(jìn)度條效果。
當(dāng)然，其實(shí)我們不需要那么多面，4 個(gè)面即可，去掉左右，然后利用漸變修改一下立方體各個(gè)面的顏色，去掉 border，核心的 CSS 代碼如下：
- .demo-cube {
- position: relative;
- .cube {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 300px;
- height: 100px;
- transform-style: preserve-3d;
- transform: translate(-50%, -50%) rotateX(-33.5deg);
- li {
- position: absolute;
- width: 300px;
- height: 100px;
- background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6));
- }
- .top {
- transform: rotateX(90deg) translateZ(50px);
- }
- .bottom {
- transform: rotateX(-90deg) translateZ(50px);
- }
- .front {
- transform: translateZ(50px);
- }
- .back {
- transform: rotateX(-180deg) translateZ(50px);
- }
- }
- }
我們就可以得到一個(gè)非常酷炫的 3D 進(jìn)度條效果：
利用 CSS Property 給 3D 進(jìn)度條加上動(dòng)畫(huà)
當(dāng)然，進(jìn)度條嘛，它需要一個(gè)填充動(dòng)畫(huà)。由于我們使用的是漸變實(shí)現(xiàn)的進(jìn)度條的進(jìn)度，需要去控制其中的顏色百分比變化。
而正常而言，CSS 是不支持漸變的動(dòng)畫(huà)的，不過(guò)這也難不倒我們，因?yàn)槲覀兛梢允褂?CSS @Property 。
簡(jiǎn)單改造一下代碼：
- @property --per {
- syntax: '<percentage>';
- inherits: false;
- initial-value: 0%;
- }
- .demo-cube .cube {
- .top,
- .front,
- .bottom,
- .back {
- background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1));
- animation: perChange 6s infinite;
- }
- }
- @keyframes perChange {
- 0% {
- --per: 0%;
- }
- 90%,
- to {
- --per: 80%;
- }
- }
這樣，我們就實(shí)現(xiàn)了一個(gè)會(huì)動(dòng)的 3D 進(jìn)度條，只需要控制 --per CSS 自定義屬性即可，效果如下：
對(duì)于 CSS @Property 不算很了解的，可以看看作者的這篇文章 -- CSS @property，讓不可能變可能[10]，它的出現(xiàn)，讓 CSS 極大的提升了制作各種動(dòng)畫(huà)的能力。
上述的完整代碼，你可以猛擊這里：CSS 靈感 -- 3D 立方體進(jìn)度條[11]
擴(kuò)展延伸
本文從簡(jiǎn)到繁介紹了使用 HTML/CSS 逐步構(gòu)建進(jìn)度條的方式，并且逐漸加深了難度。
當(dāng)然，隨著難度的提升，得到的是更為酷炫的進(jìn)度條。
基于上述的方法介紹，基本可以演化出各種我們需要的進(jìn)度條。譬如基于上述的方法，可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的電池充電動(dòng)畫(huà)：
當(dāng)然，CSS 千變?nèi)f化，進(jìn)度條的種類(lèi)肯定也不僅僅局限于上述的幾類(lèi)。譬如我們可以利用濾鏡實(shí)現(xiàn)的仿華為手機(jī)的充電動(dòng)畫(huà)，也是一種進(jìn)度條的呈現(xiàn)方式，也是能夠使用純 CSS 實(shí)現(xiàn)的：
上述效果的完整實(shí)現(xiàn)可以戳 -- 巧用 CSS 實(shí)現(xiàn)酷炫的充電動(dòng)畫(huà)[12]
又或者，我們可以在進(jìn)度條的紋理上做文章：
效果來(lái)源于 CodePen -- Bars By Lucagaz[13]。
總而言之，CSS 美好世界值得我們?nèi)ヌ剿鳌?/p>
最后
好了，本文到此結(jié)束，希望本文對(duì)你有所幫助 :)
參考資料
[1]《利用 datalist 實(shí)現(xiàn)可過(guò)濾下拉選框》:
https://github.com/chokcoco/cnblogsArticle/issues/30
[2]CodePen Demo -- 單標(biāo)簽的進(jìn)度條效果:
https://codepen.io/pen/
[3]CSS @property，讓不可能變可能:
https://github.com/chokcoco/iCSS/issues/109
[4]CodePen Demo - 角向漸變實(shí)現(xiàn)圓弧形進(jìn)度條:
https://codepen.io/Chokcoco/pen/oNewMLy
[5]CodePen Demo -- 首尾為圓形的圓弧進(jìn)度條:
https://codepen.io/Chokcoco/pen/VwzzVEV
[6]純 CSS 實(shí)現(xiàn)波浪效果!:
https://github.com/chokcoco/iCSS/issues/22
[7]CodePen Demo -- Pure Css Wave Progress bar:
https://codepen.io/Chokcoco/pen/EXJrdB
[8]CodePen Demo -- Pure Css Wave Progress bar Animation:
https://codepen.io/Chokcoco/pen/rNzGbWY
[9]奇思妙想 CSS 3D 動(dòng)畫(huà) | 僅使用 CSS 能制作出多驚艷的動(dòng)畫(huà)?:
https://github.com/chokcoco/iCSS/issues/132
[10]CSS @property，讓不可能變可能:
https://github.com/chokcoco/iCSS/issues/109
[11]CSS 靈感 -- 3D 立方體進(jìn)度條:
https://csscoco.com/inspiration/#/./3d/3d-cuber-progress-bar
[12]巧用 CSS 實(shí)現(xiàn)酷炫的充電動(dòng)畫(huà):
https://github.com/chokcoco/iCSS/issues/75
[13]CodePen -- Bars By Lucagaz:
https://codepen.io/lucagez/pen/ReMLVV
