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 才支援，但相信不久的将来应该就会变成标准化的功能啰。

意见反馈