如何通過(guò)HTML/CSS 實(shí)現(xiàn)各類(lèi)進(jìn)度條的功能
我要評(píng)論需求：我們?cè)陂_(kāi)發(fā)中會(huì)遇到使用各式各樣的進(jìn)度條，因?yàn)楫?dāng)前插件里面進(jìn)度條各式各樣的，為了方便我們定制化的開(kāi)發(fā)和方便修改樣式，我們這里使用HTML和CSS樣式來(lái)進(jìn)行開(kāi)發(fā)進(jìn)度條功能。
通過(guò)本文學(xué)習(xí)我們會(huì)明白如何使用 HTML/CSS 創(chuàng)建各種基礎(chǔ)進(jìn)度條及花式進(jìn)度條及其動(dòng)畫(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)度條
1，橫向進(jìn)度條效果如下
我們最為常見(jiàn)遇到進(jìn)度條是橫向進(jìn)度條。這個(gè)是最多的，主要利用HTML5 原生提供了兩個(gè)標(biāo)簽 和 來(lái)實(shí)現(xiàn)進(jìn)度條。
meter 具體實(shí)例如下：
<p>
<span>完成度：</span>
<meter min="0" max="500" value="350">350 degrees</meter>
</p>其中，min、max、value 分別表示最大值，最小值與當(dāng)前值。
我們?cè)賮?lái)看看 標(biāo)簽的用法：
<p>
<label for="file">完成度：</label>
<progress max="100" value="70"> 70% </progress>
</p>其中，max 屬性描述這個(gè) progress 元素所表示的任務(wù)一共需要完成多少工作量，value 屬性用來(lái)指定該進(jìn)度條已完成的工作量。
二者比較差異如下：
那么問(wèn)題來(lái)了，從上述 Demo 看，兩個(gè)標(biāo)簽的效果一模一樣，那么它們的區(qū)別是什么？為什么會(huì)有兩個(gè)看似一樣的標(biāo)簽?zāi)兀?br />這兩個(gè)元素最大的差異在于語(yǔ)義上的差別。
meter 表示已知范圍內(nèi)的標(biāo)量測(cè)量值或分?jǐn)?shù)值
progress 表示任務(wù)的完成進(jìn)度
譬如，一個(gè)需求當(dāng)前的完成度，應(yīng)該使用 ，而如果要展示汽車(chē)儀表盤(pán)當(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)畫(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)度條。
（1）使用百分比實(shí)現(xiàn)進(jìn)度條
最為常見(jiàn)的一種方式是使用背景色配合百分比的方式制作帶有漸變的進(jìn)度條。
最簡(jiǎn)單的一個(gè) DEMO示例如下：
<div class="g-container">
<div class="g-progress"></div>
</div>
<div class="g-progress"></div>同樣的，我們可以利用 HTML style 屬性填寫(xiě)完整的 background 值傳遞實(shí)際百分比，當(dāng)然，這里更推薦使用 CSS 自定義屬性傳值
為了實(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;
}2，圓形進(jìn)度條效果如下：
核心就是使用角向漸變 background: conic-gradient()：
示例效果如下：
代碼如下：
<div class="progress-circle"
v-for="(item,index) in progressList" :key="index"
:style="{
background: `radial-gradient(#fff 55%, transparent 56%), conic-gradient(#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0.4 : 0 }%),radial-gradient(#fff 60%, #F1F3FC 0%);`
}
">
<span class="progress-value" >{{item.name}}</span>
<div class="totalvalbox" >
{{ item.rate }}%
</div>
</div>
<style lang="scss" scoped>
.progress-circle {
position: relative;
width: 149rpx;
height: 149rpx;
font-family: PingFang SC;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.progress-value {
position: absolute;
text-align: center;
line-height: 50rpx;
width: 100%;
font-weight: 400;
font-size: 26rpx;
}
.totalvalbox {
min-width: 217rpx;
text-align: center;
position: absolute;
bottom: -50rpx;
font-weight: 400;
font-size: 30rpx;
}
</style>優(yōu)化問(wèn)題如下：
這里容易出現(xiàn)的問(wèn)題如下：
角向漸變實(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í)際改變后的效果：
我們?cè)谟行┣闆r會(huì)遇到進(jìn)度條收尾用圓角的進(jìn)度條，這種情況當(dāng)然進(jìn)度條顏色是純色也是可以解決的，我們通過(guò)在在首尾處疊加兩個(gè)小圓圈即可實(shí)現(xiàn)這種效果。
如果進(jìn)度條是漸變色的話，這種進(jìn)度條則需要借助 SVG/Canvas 實(shí)現(xiàn)了
實(shí)例如下：
html
<div class="g-progress"></div>
<div class="g-container">
<div class="g-progress"></div>
<div class="g-circle"></div>
</div>css
body, html {
width: 100%;
height: 100%;
display: flex;
}
.g-container {
position: relative;
margin: auto;
width: 200px;
height: 200px;
}
.g-progress {
position: relative;
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
mask: radial-gradient(transparent, transparent 80px, #000 80.5px, #000 0);
}
.g-circle {
position: absolute;
top: 0;
left: 0;
&::before,
&::after {
content: "";
position: absolute;
top: 90px;
left: 90px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #FFCDB2;
z-index: 1;
}
&::before {
transform: translate(0, -90px);
}
&::after {
transform: rotate(90deg) translate(0, -90px) ;
}
}基于此拓展，還可以實(shí)現(xiàn)多色的圓弧型進(jìn)度條：（這個(gè)可能不像進(jìn)度條，更類(lèi)似于餅圖）
.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%
);
}3，球形進(jìn)度條效果如下
球形進(jìn)度條也是比較常見(jiàn)的，類(lèi)似于下面這種：
核心代碼如下：
控制一下球形容器表示進(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;
}
}4，炫酷的充電進(jìn)度條如下
當(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)的：
核心代碼如下
<div class="g-container">
<div class="g-number">98.7%</div>
<div class="g-contrast">
<div class="g-circle"></div>
<ul class="g-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
html,
body {
width: 100%;
height: 100%;
display: flex;
background: #000;
overflow: hidden;
}
.g-number {
position: absolute;
width: 300px;
top: 27%;
text-align: center;
font-size: 32px;
z-index: 10;
color: #fff;
}
.g-container {
position: relative;
width: 300px;
height: 400px;
margin: auto;
}
.g-contrast {
filter: contrast(10) hue-rotate(0);
width: 300px;
height: 400px;
background-color: #000;
overflow: hidden;
animation: hueRotate 10s infinite linear;
}
.g-circle {
position: relative;
width: 300px;
height: 300px;
box-sizing: border-box;
filter: blur(8px);
&::after {
content: "";
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%) rotate(0);
width: 200px;
height: 200px;
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
animation: rotate 10s infinite linear;
}
&::before {
content: "";
position: absolute;
width: 176px;
height: 176px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #000;
z-index: 10;
}
}
.g-bubbles {
position: absolute;
left: 50%;
bottom: 0;
width: 100px;
height: 40px;
transform: translate(-50%, 0);
border-radius: 100px 100px 0 0;
background-color: #00ff6f;
filter: blur(5px);
}
li {
position: absolute;
border-radius: 50%;
background: #00ff6f;
}
@for $i from 0 through 15 {
li:nth-child(#{$i}) {
$width: 15 + random(15) + px;
left: 15 + random(70) + px;
top: 50%;
transform: translate(-50%, -50%);
width: $width;
height: $width;
animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;
}
}
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: .1;
transform: translate(-50%, -180px);
}
}
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
}
}5，拖拽與延伸
最后推薦幾款好高質(zhì)量更為酷炫的進(jìn)度條
上述效果的完整實(shí)現(xiàn)可以戳 – 巧用 CSS 實(shí)現(xiàn)酷炫的充電動(dòng)畫(huà)
效果來(lái)源于 CodePen – Bars By Lucagaz。
到此這篇關(guān)于如何通過(guò)HTML/CSS 實(shí)現(xiàn)各類(lèi)進(jìn)度條的功能。的文章就介紹到這了,更多相關(guān)html css進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 進(jìn)度條想必大家并不陌生吧，而且實(shí)現(xiàn)方法各種各樣，在本文為大家講解下利用html+css實(shí)現(xiàn)進(jìn)度條的制作，感興趣的朋友可以嘗試操作下2013-09-30
- 這篇文章主要介紹了網(wǎng)頁(yè)加載進(jìn)度條，文中解釋了屬性和應(yīng)用，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-17