Scroll Progress Indicator (捲動進度指示器)

進度條依任務完成比例由左往右填滿。

在[套用位置]加入「確定進度條」(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
進度條隨實際進度由左往右填滿，每次更新之間平順過渡，並在旁邊顯示百分比。
使用含目前值、最小值和最大值的正確進度條語意，讓螢幕閱讀器能讀出進度，而且填充絕不能倒退。

頁面頂端的細條在換頁過程中緩慢前進，載入完成時走完全程。

在[套用位置]加入「頂部載入條」(Top Loading Bar)，也叫 page progress bar。
頁面載入時，頂端邊緣的細條先快速往前衝，接著越走越慢；載入完成後迅速衝到盡頭並淡出。
在載入真正完成之前絕不能走到盡頭，也不要遮住或推移頁面內容。

圓弧沿著圓環延伸，顯示完成的百分比。

在[套用位置]加入「環形進度條」(Progress Ring)，也叫 circular progress 或 radial progress。
圓弧從頂端開始沿圓環順時針延伸，顯示完成的百分比，停下時緩緩減速，同時中間的數字跟著遞增。
讓圓弧和數字保持同步，並用正確的進度條語意向螢幕閱讀器提供數值。

捲動停止時會吸附到預設的位置，例如投影片或區塊。

在[套用位置]加入「捲動吸附」(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
捲動停下時，畫面要俐落地吸附到最近的區塊，讓每個區塊都對齊邊緣，而不是停在一半。
使用瀏覽器原生的吸附功能，讓滑鼠滾輪、觸控和鍵盤捲動都照常運作，並確保比畫面更高的內容也能完整閱讀。

動畫進度直接綁定捲動位置，往下捲動時播放，往回捲動時倒轉。

在[套用位置]加入「捲動連動動畫」(Scroll-Linked Animation)，也叫 scroll-driven animation 或 scroll scrub。
動畫要緊跟著捲動位置：往下捲動時正向播放，往上捲動時當場倒轉，本身不帶以時間為基礎的緩動。
把整段動畫對應到一個明確的捲動範圍；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示一個合理的靜態狀態。

元素進入或離開可視區域時，動畫播放一次。

在[套用位置]加入「捲動觸發動畫」(Scroll-Triggered Animation)，也叫捲動顯現 (reveal on scroll) 或 animate on scroll。
每個元素進入畫面時只播放一次：淡入並往上滑到定位，用自己快速流暢的節奏播放，而不是跟著捲動位置。
腳本載入失敗時內容也要看得到；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示元素。