本文將介紹如何使用 HTML/CSS 建立各種基礎進度條及花式進度條及其動畫的方式,通過本文,你可能可以學會:
通過 HTML 標籤 <meter> 建立進度條
通過 HTML 標籤 <progress> 建立進度條
HTML 實現進度條的侷限性
使用 CSS 百分比、漸變建立普通進度條及其動畫
使用 CSS 建立圓環形進度條
使用 CSS 建立球形進度條
使用 CSS 建立 3D 進度條
進度條,是我們日常介面中使用的非常多的一種,下面我們來看看。到今天,我們可以如何實現進度條。
HTML 標籤 -- meter & progress
這個可能是一些同學還不太清楚的,HTML5 原生提供了兩個標籤 <meter> 和 <progress> 來實現進度條。
<meter>:用來顯示已知範圍的標量值或者分數值
<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 看,兩個標籤的效果一模一樣,那麼它們的區別是什麼?為什麼會有兩個看似一樣的標籤呢?
這兩個元素最大的差異在於語意上的差別。
<meter>:表示已知範圍內的標量測量值或分數值
<progress>:表示任務的完成進度
譬如,一個需求當前的完成度,應該使用 <progress>,而如果要展示汽車儀表盤當前的速度值,應該使用 meter。
meter & progress 的侷限性
當然,在實際的業務需求中,或者生產環境,你幾乎是不會看到 <meter> 和 <progress> 標籤。
我們無法有效的修改 <meter> 和 <progress> 標籤的樣式,譬如背景色,進度前景色等。並且,最為致命的是,瀏覽器預設樣式的表現在不同瀏覽器之間並不一致。這給追求穩定,UI 表現一致的業務來說,是災難性的缺點!
我們無法給他新增一些動畫效果、互動效果,因為一些實際的應用場景中,肯定不是簡單的展示一個進度條僅此而已
利用 CSS 實現進度條
因此,在現階段,更多的還是使用一些 CSS 的方式去實現進度條。
使用百分比實現進度條
最為常見的一種方式是使用背景色配合百分比的方式製作進度條。
最簡單的一個 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; }
效果如下:
這種方式優勢在於使用簡單,實際進度可以非常方便的傳遞進 CSS 中
利用 HTML style 屬性填寫完整的 width 值,譬如 <div class="g-progress" style="width: 50%"></div>
或者利用 CSS 自定義屬性 <div class="g-progress" style="--progress: 50%"></div> 配合實際 CSS 中的 width: var(--progress)
完全的自定義樣式,以及可以輕鬆的新增輔助豐富的動畫和互動效果
譬如給 g-progress 新增一個過渡效果:
.g-progress { // ... transition: width .2s linear; }
這樣,每次進度變化,都是一個動態的過渡過程:
或者,漸變前景色,修改 background: #0f0 為 background: linear-gradient(90deg, #0f0, #0ff):
單標籤使用漸變實現
當然,可以看到,我們上面使用的是兩個標籤的結構:
<div class="g-container"> <div class="g-progress"></div> </div>
摳門點,我們還可以僅僅利用一個標籤去完成這個事情,主要藉助了漸變去完成這個事情:
<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; }
結果如下:
同樣的,我們可以利用 HTML style 屬性填寫完整的 background 值傳遞實際百分比,當然,這裡更推薦使用 CSS 自定義屬性傳值:
<div class="g-progress" style="--progress: 50%"></div>
.g-progress { background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0); }
熟悉 CSS 的同學會發現一個目前這種方式的弊端,在於當修改 --progress 的值的時候,即便給 .g-progress 新增了 transition,也不會有過渡動畫效果。
原因在於,CSS 中,漸變(諸如 linear-gradinet、radial-gradient、conic-gradient)都是不支援過渡變換的。
所以,在這裡,為了實現動畫效果,我們可以藉助 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 的特性,我們在單標籤下也是可以實現動畫效果的:
當然,這裡不僅僅只是上述所說的百分比、和漸變兩種方式可以實現這種最常見的進度條,所有可以實現長度變化的,其實都可以用於實現進度條,包括但不限於:
寬度(使用百分比為單位的寬度更為直接)
漸變(控制漸變的過渡點的百分比的值)
漸變的 background-size
transfrom: scale()(縮放也能改變寬度大小)
clip-path 進行裁剪
圓弧形進度條
當然,進度條不可能只有直線型的。還有非常多其他型別的,下面我們首先來看看圓弧型的進度條。
在今天,我們可以使用 CSS 快速的建立圓弧形式的進度條,類似於這樣:
核心就是使用角向漸變 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(),我們可以輕鬆實現這樣一個餅圖:
接下來就是鏤空中間部分。
傳統的想法是,在中間疊加一個圓,然而,這樣做的一個極大的弊端在於,如果我們的背景不是純色而是漸變色,就不適用了,譬如這樣:
那麼如何鏤空中間,使得中間部分透明呢?這裡我們可以巧妙的通過 mask 屬性達到目的,鏤空中間:
.g-progress { background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D); + mask: radial-gradient(transparent, transparent 50%, #000 50%, #000 0); }
這樣,我們就輕鬆的鏤空了中間,即便背景不是純色也無妨。
基於此拓展,還可以實現多色的圓弧型進度條:
.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% ); }
當然,這個可能不像進度條,更類似於餅圖?
角向漸變實現圓弧進度條的侷限性
當然,這個方法有兩個弊端。
當然進度百分比不是類似於 0°、90°、180°、270°、360° 這類數位時,使用角向漸變時,不同顏色間的銜接處會有明顯的鋸齒。
看個例子 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D):
遇到此類問題的解決方案是,在銜接處,適當留出一些漸變空間,我們簡單的改造一下上述角向漸變程式碼:
{ - background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)` + background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)` }
仔細看上面的程式碼,將從 27% 到 27% 的一個變化,改為了 從 27% 到 27.2%,這多出來的 0.2% 就是為了消除鋸齒的,實際改變後的效果:
具體使用的使用,可以多偵錯選取既不會看出模糊,又能儘可能消除鋸齒的一個範圍幅度。
對於開頭和結尾需要圓形的圓弧進度條實現起來較為麻煩
還有一種情況,實際使用中,要求的是首尾帶圓形的圓弧進度條,例如下圖所示:
當然,這種情況當然進度條顏色是純色也是可以解決的,我們通過在在首尾處疊加兩個小圓圈即可實現這種效果。
如果進度條是漸變色的話,這種進度條則需要藉助 SVG/Canvas 實現了。
球形進度條
球形進度條也是比較常見的,類似於下面這種:
對於球形進度條,其實核心在於使用 CSS 實現中間部分的波浪效果。
這個技巧到今天應該已經被大夥熟知了,就不過多贅述,一圖勝千言,可以使用捲動大圓的方式,類似於這樣:
容器應用 overflow: hidden,就能得到這樣的效果:
應用這個技巧,只需要簡單的封裝,控制一下球形容器表示進度 0% - 100% 時的波浪的高度即可。我們就能得到從 0% - 100% 的動畫效果。
完整的程式碼大概如下:
<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; } }
3D 進度條
嗯,下面這個 3D 進度條需要對 CSS 3D 有基本的掌握。
它主要是藉助了一個 3D 立方體。接下來我們來實現一個立方體進度條~
首先,實現一個立方體,結構如下:
<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>
我們可以把這個立方體想象成一個立體的進度條容器,通過控制 6 面的顏色,我們可以巧妙的得到一種 3D 進度條效果。
當然,其實我們不需要那麼多面,4 個面即可,去掉左右,然後利用漸變修改一下立方體各個面的顏色,去掉 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); } } }
我們就可以得到一個非常酷炫的 3D 進度條效果:
利用 CSS Property 給 3D 進度條加上動畫
當然,進度條嘛,它需要一個填充動畫。由於我們使用的是漸變實現的進度條的進度,需要去控制其中的顏色百分比變化。
而正常而言,CSS 是不支援漸變的動畫的,不過這也難不倒我們,因為我們可以使用 CSS @Property 。
簡單改造一下程式碼:
@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%; } }
這樣,我們就實現了一個會動的 3D 進度條,只需要控制 --per CSS 自定義屬性即可,效果如下:
擴充套件延伸
本文從簡到繁介紹了使用 HTML/CSS 逐步構建進度條的方式,並且逐漸加深了難度。
當然,隨著難度的提升,得到的是更為酷炫的進度條。
基於上述的方法介紹,基本可以演化出各種我們需要的進度條。譬如基於上述的方法,可以實現一個簡單的電池充電動畫:
當然,CSS 千變萬化,進度條的種類肯定也不僅僅侷限於上述的幾類。譬如我們可以利用濾鏡實現的仿華為手機的充電動畫,也是一種進度條的呈現方式,也是能夠使用純 CSS 實現的:
又或者,我們可以在進度條的紋理上做文章:
總而言之,CSS 美好世界值得我們去探索。
(學習視訊分享:)
以上就是僅僅使用HTML/CSS實現各類進度條的方式(整理分享)的詳細內容,更多請關注TW511.COM其它相關文章!