CSS 顯示頁面捲動的進度條

這篇教學會使用 CSS 的漸層色做出長條圖與圓餅圖的雙色進度條，並搭配 CSS 動畫和 animation-timeline 做出偵測頁面中捲軸位置，即時改變進度條進度的效果。

注意，這個效果目前僅支援 Chrome 和 Edge，其他部分瀏覽器或行動裝置瀏覽器可能不支援。

快速導覽：

• 產生雙色進度條
• 使用 animation-timeline 即時改變進度條

產生雙色進度條

只要將雙色漸層色的「顏色位置重疊」，就可以輕鬆產生雙色進度條，如果將線性漸層 linear-gradient() 換成圓錐形漸層 conic-gradient()，就能將長條圖的進度條換成圓餅圖，下方範例會展示「單純雙色」、「雙色 + 背景尺寸位置」以及「圓餅圖」三種進度條，進度條會呈現 30% 進度。

• 參考：linear-gradient()、純 CSS 製作圓餅圖
• 線上展示：https://codepen.io/oxxo/pen/OPJMYoJ

<!-- HTML 程式碼 -->
<div class="progress p1"></div>
<div class="progress p2"></div>
<div class="progress p3"></div>

<!-- CSS 程式碼 -->
<style>
  .progress {margin: 20px;}
  .p1 {
    width: 300px;
    height: 50px;
    border: 1px solid #000;
    background: linear-gradient(to right, #fc0 30%, #fff 30%); /* 兩種顏色在 30% 位置重疊 */
  }
  .p2 {
    width: 300px;
    height: 50px;
    border: 1px solid #000;
    background: linear-gradient(to right, #fc0 50%, #fff 50%); /* 兩種顏色在 50% 位置重疊 */
    background-size: 200% 100%;               /* 背景寬度為元素寬度的 200% */
    background-position: calc(100% - 30%);    /* 背景位置為 100% - 30% */
  }
  .p3 {
    top: 180px;
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    border-radius: 50%;                             /* 變成圓形 */
    background: conic-gradient(#fc0 30%, #fff 30%); /* 兩種顏色在 50% 位置重疊 */
  }
</style>

使用 animation-timeline 即時改變進度條

延伸上方雙色進度條範例，按照下方重點修改為根據頁面捲軸改變進度的效果。

• 使用 .main 模擬視窗捲軸。
• 進度條使用 sticky 定位才能讀取到 .main 捲軸，如果是放在頁面裡改為 fixed。
• 使用自訂屬性 --x、--deg 透過動畫改變漸層色的位置或角度。

• 參考：CSS 動畫進度控制、CSS @property 自訂屬性值
• 線上展示：https://codepen.io/oxxo/pen/raNxgZG

<!-- HTML 程式碼 -->
<div class="main">
  <div class="progress p1"></div>
  <div class="progress p2"></div>
  <div class="progress p3"></div>
  <div class="contain"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .main {
    position: relative;            /* 讓內容 sticky 可以有定位參考 */
    box-sizing: border-box;
    border:1px solid #000;
    width: 500px;
    height: 400px;
    padding: 20px;
    overflow: hidden scroll;       /* 隱藏超出範圍內容，加入 y 方向捲軸 */
  }
  .contain {height: 1000px;}       /* 讓頁面捲軸長一點 */

  .progress {
    position: sticky;              /* 黏貼定位，如果放在頁面中改為 fixed */
    left: 20px;
    animation: oxxo forwards;      /* 動畫結束後會停留在 100% 進度 */
    animation-timeline: scroll();  /* 使用捲軸控制動畫進度 */
  }
  /* 百分比自訂屬性 */
  @property --x {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }
  /* 角度自訂屬性 */
  @property --deg {
    syntax: "<angle>";
    inherits: true;
    initial-value: 20deg;
  }
  .p1 {
    top: 20px;
    width: 300px;
    height: 50px;
    border: 1px solid #000;
    background: linear-gradient(to right, #fc0 var(--x), #fff var(--x)); /* 使用自訂屬性 */
  }
  .p2 {
    top: 100px;
    width: 300px;
    height: 50px;
    border: 1px solid #000;
    background: linear-gradient(to right, #fc0 50%, #fff 50%);
    background-size: 200% 100%;
    background-position: calc(100% - var(--x)); /* 使用自訂屬性 */
  }
  .p3 {
    top: 180px;
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    border-radius: 50%;    
    background: conic-gradient(#fc0 var(--deg),#fff var(--deg)); /* 使用自訂屬性 */
  }
  /* 從動畫進度改變自訂屬性 */
  @keyframes oxxo {
    0% {
      --x : 0%;
      --deg: 0deg;
    }
    100% {
      --x : 100%;
      --deg: 360deg;
    }
  }
</style>

小結

過去都得透過 JavaScript 動態偵測瀏覽器卷軸，才能做出顯示瀏覽進度的效果，現在只要透過 CSS 的動畫進度控制，就能輕鬆做出這種很酷的效果，雖然目前只有 Chrome 和 Edge 才支援，但相信不久的將來應該就會變成標準化的功能囉。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～