iT邦幫忙

2025 iThome 鐵人賽

DAY 18
3
Modern Web

關於那些有趣的 CSS 效果系列 第 18

( Day 18 ) 純 CSS 顯示頁面捲動的進度條

  • 分享至 

  • xImage
  •  

邊吃丹丹邊看 Youtube 的時候,突然注意到影片的進度條,心想用個純 CSS 來做進度條應該很乾丹吧!沒想到要跟「網頁卷軸」搭配還真的有點不乾丹,所以寫了篇乾丹的教學分享給大家,順便乾丹吃個不乾丹的丹丹~ 寫到這邊突然發現「丹」這個字看起來完全不像「丹」,聽説這叫做「語義飽和」( semantic satiation )。

純 CSS 顯示頁面捲動的進度條

正文開始

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

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

CSS 教學 - CSS 顯示頁面捲動的進度條

產生雙色進度條

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

<!-- 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>

CSS 教學 - CSS 顯示頁面捲動的進度條 - 產生雙色進度條

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

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

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

CSS 教學 - CSS 顯示頁面捲動的進度條 - 使用 animation-timeline 即時改變進度條

小結

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


上一篇
( Day 17 ) 純 CSS 捲軸改變文字背景色
下一篇
( Day 19 ) 純 CSS 水波效果 ( 最後有點不純 )
系列文
關於那些有趣的 CSS 效果35
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言