還記得那年 NASA 看到隕石即將撞上地球，科學家們努力計算著數據避免碰撞，這時突然出現了 Windows 更新的進度條 ... 天呀！看著進度條，心想不如用純 CSS 來做個進度條怎麼樣呢？這樣就可以產生如「假」包換「不可能更新完成」的進度條啦！( 來源：https://www.youtube.com/watch?v=xDLvUqhwHZc )

正文開始

這篇教學會運用自訂屬性、動畫、漸層色、計數器等許多 CSS 技巧，單純使用 CSS 實作出「數字會變化、進度條會改變」的進度條，不僅可以練習許多 CSS 整合技術，也可以做出不依靠 JavaScript 的進度條效果。

運用計數器做出會動的數字

要透過純 CSS 製作「會動的數字」，必須要使用「自訂屬性」、「計數器」和「動畫」互相搭配，主要步驟如下：

• 動畫設定為 step()，讓播放動畫時使用「步進」方式切換影格 ( 參考「動畫速度 )。
• 透過動畫逐步改變自訂屬性建立的變數 ( 參考「自訂屬性值」)。
• 透過「重設計數器」的方式，讓虛擬元素可以不斷顯示變數數值 ( 參考「清單計數器」)。

線上展示：https://codepen.io/oxxo/pen/GgJBREp

html >>>>
<!-- 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 的寬度，就能做出會動的背景。

• 延伸閱讀：xywh() 虛擬矩形
• 線上展示：https://codepen.io/oxxo/pen/jEPpOwL

html >>>>
<!-- 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 程式將進度條美化，下方範例呈現漸層色進度條、分層漸層進度條以及圓餅圖進度條三種效果，詳細說明寫在註解裡。

• 延伸參考：CSS 漸層色、CSS 動畫 animation
• 線上展示：https://codepen.io/oxxo/pen/ZYGjEyo

html >>>>
<!-- 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 實作進度條吧。

• 原文參考：純 CSS 數字進度條
• 延伸閱讀：CSS 教學大全