纯 CSS 数字加载进度条

这篇教学会运用自订属性、动画、渐层色、计数器等许多 CSS 技巧，单纯使用 CSS 实作出“数字会变化、进度条会改变”的进度条，不仅可以练习许多 CSS 整合技术，也可以做出不依靠 JavaScript 的进度条效果。

快速导览：

• 运用计数器做出会动的数字
• 搭配 clip-path 做出数字进度条
• 使用渐层色美化数字进度条

运用计数器做出会动的数字

要透过纯 CSS 制作“会动的数字”，必须要使用“自订属性”、“计数器”和“动画”互相搭配，主要步骤如下：

• 动画设定为 step()，让播放动画时使用“步进”方式切换影格 ( 参考“动画速度 )。
• 透过动画逐步改变自订属性建立的变数 ( 参考“自订属性值”)。
• 透过“重设计数器”的方式，让虚拟元素可以不断显示变数数值 ( 参考“清单计数器”)。

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

<!-- 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 程式碼 -->
<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 程式碼 -->
<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 实作进度条吧。

意见反馈