純 CSS 數字進度條
這篇教學會運用自訂屬性、動畫、漸層色、計數器等許多 CSS 技巧，單純使用 CSS 實作出「數字會變化、進度條會改變」的進度條，不僅可以練習許多 CSS 整合技術，也可以做出不依靠 JavaScript 的進度條效果。
快速導覽：
運用計數器做出會動的數字
要透過純 CSS 製作「會動的數字」，必須要使用「自訂屬性」、「計數器」和「動畫」互相搭配，主要步驟如下：
<!-- HTML 程式碼 -->
<div></div>
<!-- CSS 程式碼 -->
<style>
/* 設定自訂屬性 */
@property --ms {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
div {
counter-reset: count-ms var(--ms); /* 重設計數器 */
animation: oxxo-ms 2s steps(100) forwards; /* 動畫改變自訂屬性數值 */
}
div::before {
font-size: 50px;
content: "";
content: counter(count-ms) "%"; /* 虛擬元素顯示 count-ms 計數器數值 */
}
@keyframes oxxo-ms {
to {--ms: 100;} /* 動畫播放結束影格為數值 100 */
}
</style>
搭配 clip-path 做出數字進度條
可以做出「會動的數字」之後，接下來就可以進一步加入「會動的背景」美化進度條，下方範例使用 ::after 虛擬元素作為背景，並加入簡單的背景色，透過動畫效果改變 clip-path 的寬度，就能做出會動的背景。
<!-- HTML 程式碼 -->
<div></div>
<!-- CSS 程式碼 -->
<style>
@property --ms {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
div {
margin: 20px;
position: relative; /* 讓虛擬元素定位可以參考 */
width: 300px;
height: 30px;
border: 1px solid #000;
counter-reset: count-ms var(--ms); /* 重設計數器 */
animation: oxxo-ms 2s steps(100) forwards; /* 動畫改變自訂屬性數值 */
}
div::after, div::before {
content: "";
position: absolute; /* 虛擬元素尺寸絕對定位 */
z-index: 1;
width: 100%; /* 虛擬元素尺寸和元素相同 */
height: 100%;
top: 0; /* 虛擬元素定位在元素左上角 */
left: 0;
font-family: verdana;
}
div::before {
z-index: 2; /* 讓 ::before 覆蓋在 ::after 之上 */
content: counter(count-ms) "%"; /* 虛擬元素顯示 count-ms 計數器數值 */
}
div::after {
clip-path: xywh(0 0 var(--val) 30px); /* 使用虛擬矩形裁切形狀 */
background: linear-gradient(to right, #09c, #0cf); /* 簡單漸層背景 */
animation: oxxo 2s forwards; /* 套用背景變長的效果 */
}
@keyframes oxxo-ms {
to {--ms: 100;} /* 動畫播放結束影格為數值 100 */
}
@keyframes oxxo {
0% {clip-path: xywh(0 0 0 30px);} /* 背景變長的動畫效果 */
100% {clip-path: xywh(0 0 100% 230px);}
}
</style>
使用漸層色美化數字進度條
了解數字和漸層背景的原理後，就可以撰寫較為複雜的 CSS 程式將進度條美化，下方範例呈現漸層色進度條、分層漸層進度條以及圓餅圖進度條三種效果，詳細說明寫在註解裡。
<!-- HTML 程式碼 -->
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<!-- CSS 程式碼 -->
<style>
/* 自訂屬性 */
@property --ms {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
div {
position: relative; /* 虛擬元素定位參考 */
box-sizing: border-box; /* 避免邊框影響尺寸 */
margin: 20px;
width: 300px; /* 長條形進度條 */
height: 30px;
border-radius: 15px; /* 圓角 */
border: 5px solid #eee; /* 邊框 */
box-shadow: 1px 1px 5px; /* 陰影 */
background: #fff;
counter-reset: count-ms var(--ms); /* 每個 div 都重設計數器 */
overflow: hidden; /* 超過範圍隱藏 */
}
div::before, div::after {
content: "";
position: absolute; /* 虛擬元素絕對定位 */
width: 100%; /* 虛擬元素尺寸和元素相同 */
height: 100%;
top: 0; /* 虛擬元素定位 */
left: 0;
font-size: 12px;
font-family: verdana;
line-height: 20px; /* 虛擬元素文字垂直置中，因為元素上下邊框共有 10px，計算後為 30-10=20px */
text-align: center; /* 虛擬元素文字水平置中 */
}
div::before {
z-index: 2; /* 覆蓋在 ::after 之上 */
content: counter(count-ms) "%"; /* 虛擬元素顯示 count-ms 計數器數值 */
}
@keyframes oxxo-ms {
to {
--ms: 100; /* 動畫結束點為數值為 10 的自訂屬性 --ms */
}
}
.p1 {animation: oxxo-ms 2s forwards;} /* 計數器數字動畫 */
.p1::after {
z-index: 1;
clip-path: xywh(0 0 var(--val) 20px round 10px); /* 裁切進度條形狀 */
background: linear-gradient(to right,
pink, deeppink, red, orange, yellow,
green, cyan, blue, indigo, purple); /* 進度條彩虹背景色 */
animation: oxxo1 2s forwards; /* 進度條動畫 */
}
@keyframes oxxo1 {
0% {clip-path: xywh(0 0 0 20px round 10px);}
100% {clip-path: xywh(0 0 100% 20px round 10px);}
}
.p2 {animation: oxxo-ms 5s steps(100) forwards;} /* 計數器數字動畫 */
.p2::after {
clip-path: xywh(0 0 50% 20px round 10px); /* 裁切進度條形狀 */
background: linear-gradient(to right,
pink 0%, pink 10%,
deeppink 10%, deeppink 20%,
red 20%, red 30%,
orange 30%, orange 40%,
yellow 40%, yellow 50%,
green 50%, green 60%,
cyan 60%, cyan 70%,
blue 70%, blue 80%,
indigo 80%, indigo 90%,
purple 90%, purple 100%); /* 進度條彩虹格狀背景色 */
animation: oxxo2 5s steps(10) forwards;
}
@keyframes oxxo2 {
0% {clip-path: xywh(0 0 0 20px round 10px);}
100% {clip-path: xywh(0 0 100% 20px round 10px);}
}
/* 定義圓餅圖漸層角度 */
@property --deg {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.p3 {
width: 150px;
height: 150px;
border-radius: 50%; /* 製作圓形 */
animation: oxxo-ms 5s forwards; /* 計數器數字動畫 */
}
p3::before {line-height: 140px;}
.p3::after {
z-index: 1;
background: conic-gradient(orange 0deg, orange var(--deg), white var(--deg)); /* 進度條顏色 */
animation: oxxo3 5s forwards; /* 進度條動畫 */
}
@keyframes oxxo3 {
0% {--deg: 0deg;}
100% {--deg: 360deg;}
}
</style>
小結
要製作純粹的 CSS 進度條，必須透過自訂屬性、漸層色、計數器、動畫等多種 CSS 技巧才能實現，雖然實際用途不大 ( 可能吧 )，但也不失爲一個練習 CSS 技術整合的好機會，如果網站有相關需求，不妨運用 CSS 實作進度條吧。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～