首頁>網頁設計教程>HTML教程

如何透過HTML/CSS 實現各類別進度條的功能

作者：Eve Cole 更新時間：2024-12-17 11:56:52

需求：我們在開發中會遇到使用各式各樣的進度條，因為目前外掛裡面進度條各式各樣的，為了方便我們客製化的開發和方便修改樣式，我們這裡使用HTML和CSS樣式來進行開發進度條功能。

透過本文學習我們會明白如何使用HTML/CSS 創建各種基礎進度條及花式進度條及其動畫的方式。

透過HTML 標籤meter 建立進度條透過HTML 標籤progress建立進度條HTML 實現進度條的限制使用CSS 百分比、漸進建立普通進度條及其動畫使用CSS 建立圓環形進度條使用CSS 建立球形進度條

1，橫向進度條效果如下

我們最常見遇到進度條是橫向進度條。這個是最多的，主要利用HTML5 原生提供了兩個標籤和來實現進度條。

meter 具體實例如下： 

 <p>
<span>完成度：</span>
<meter min="0" max="500" value="350">350 degrees</meter>
</p>

其中，min、max、value 分別表示最大值，最小值與目前值。

我們再來看看標籤的用法： 

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

其中，max 屬性描述這個progress 元素所表示的任務總共需要完成多少工作量，value 屬性用來指定該進度條已完成的工作量。

二者比較差異如下：那麼問題來了，從上述Demo 看，兩個標籤的效果一模一樣，那麼它們的區別是什麼？為什麼會有兩個看似一樣的標籤呢？這兩個元素最大的差異在於語意上的差異。 meter表示已知範圍內的標量測量值或分數值progress表示任務的完成進度譬如，一個需求當前的完成度，應該使用，而如果要展示汽車儀錶板當前的速度值，應該使用meter。

meter & progress 的限制當然，在實際的業務需求中，或生產環境，你幾乎是不會看到meter 和progress 標籤。我們無法有效的修改meter和progress標籤的樣式，譬如背景色，進度前景色等。而且，最致命的是，瀏覽器預設樣式的表現在不同瀏覽器之間並不一致。這給追求穩定，UI 表現一致的業務來說，是災難性的缺點！我們無法為他添加一些動畫效果、互動效果，因為在一些實際的應用場景中，肯定不是簡單的展示一個進度條僅此而已利用CSS 實現進度條

因此，在現階段，更多的還是使用一些CSS 的方式去實現進度條。

（1）使用百分比實現進度條最常見的一種方式是使用背景色配合百分比的方式製作帶有漸進式的進度條。最簡單的一個DEMO範例如下： 

 <div class="g-container">
<div class="g-progress"></div>
</div>
<div class="g-progress"></div>

同樣的，我們可以利用HTML style 屬性填寫完整的background 值傳遞實際百分比，當然，這裡更推薦使用CSS 自訂屬性傳值為了實現動畫效果，我們可以藉助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，圓形進度條效果如下：

核心就是使用角向漸層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>

最佳化問題如下：

這裡容易出現的問題如下：角向漸進實現圓弧進度條的限制當然，這個方法有兩個弊端。當然進度百分比不是類似0&deg;、90&deg;、180&deg;、270&deg;、360&deg; 這類數字時，使用角向漸進式時，不同色間的銜接處會有明顯的鋸齒。來看例子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 實作了

實例如下：

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) ;
}
}

基於此拓展，還可以實現多色的圓弧型進度條：（這個可能不像進度條，更類似餅圖） 

 .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，球形進度條效果如下

球形進度條也是比較常見的，類似下面這種：

核心程式碼如下：控制一下球形容器表示進度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 {
頂: -120px;
}
}

4，酷炫的充電進度條如下

當然，CSS 千變萬化，進度條的種類肯定也不僅限於上述的幾類。譬如我們可以利用濾鏡實現的仿華為手機的充電動畫，也是一種進度條的呈現方式，也是能夠使用純CSS 實現的：

核心程式碼如下

<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，拖曳與延伸

最後推薦幾款好高品質更為酷炫的進度條

上述效果的完整實作可以戳&ndash; 巧用CSS 實現酷炫的充電動畫

到此這篇關於如何透過HTML/CSS 實現各類別進度條的功能。的文章就介紹到這了,更多相關html css進度條內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！

相關文章