Donut Chart Fill (環圈圖填充)
別稱 Pie Chart Sweep, Animated Donut Chart, Radial Chart Draw
環圈或圓餅圖依順時針方向填滿到對應的百分比。
適用情境
占比構成展示
變體
- SVG stroke-dashoffset
- conic-gradient with @property
- multi-segment
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「環圈圖填充」(Donut Chart Fill) 動畫，也叫 pie chart sweep 或 animated donut chart。
從頂端開始，各段依序順時針掃出，直到環圈顯示出各自的占比，結束時平順減速。
圖表進入畫面時只播放一次，並以文字形式提供實際數值給螢幕閱讀器。相似的動效
Progress Ring (環形進度條)
別稱 Circular progress, Radial progress, Animated Circular Progress Bar
圓弧沿著圓環延伸，顯示完成的百分比。
適用情境
檔案上傳、目標、計時器
在[套用位置]加入「環形進度條」(Progress Ring)，也叫 circular progress 或 radial progress。
圓弧從頂端開始沿圓環順時針延伸，顯示完成的百分比，停下時緩緩減速，同時中間的數字跟著遞增。
讓圓弧和數字保持同步，並用正確的進度條語意向螢幕閱讀器提供數值。Chart Data Transition (圖表資料轉場)
別稱 Chart Update Animation
資料變化或切換資料集時，圖表元素從舊值平順過渡到新值。
適用情境
即時儀表板
在[套用位置]加入「圖表資料轉場」(Chart Data Transition)，也叫 chart update animation。
資料變化時，所有長條同時從舊值平順、從容地過渡到新值，而不是從零重新繪製。
每次更新都從畫面上目前的數值開始，這樣快速接連的第二次變化也不會跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即套用新數值。Circular Spinner (圓形載入圈)
別稱 Spinner, Throbber, Circular indeterminate
圓環或圓弧持續旋轉，表示正在載入。
適用情境
按鈕、頁面載入
在[套用位置]加入「圓形載入圈」(Circular Spinner)，也叫 spinner 或 throbber。
一段圓弧沿著淺色圓環等速旋轉，同時不斷伸長又縮短，流暢而連續。
旋轉要無縫銜接，並為螢幕閱讀器提供載入標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就放慢或停止旋轉。Data & Numbers 中的其他動效
- %
Number Ticker (數字遞增)
別稱 Count Up, Animated Counter, Number Counter, countUp
數字出現在畫面上時，從起始值計數到目標值。
適用情境
統計數據、KPI 區塊
在[套用位置]加入「數字遞增」(Number Ticker)，也叫 count up 或 animated counter。
數字進入畫面時，從零計數到目標值，一開始快，接近終點時柔和地放慢。
使用等寬數字，避免周圍內容抖動；只計數一次；對螢幕閱讀器以及開啟了「減少動態效果」(prefers-reduced-motion) 的使用者，直接顯示最終數值。0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9,0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Odometer (里程表數字)
別稱 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
數字變化時，每一位都縱向捲動到新的值。
適用情境
即時計數器、價格
在[套用位置]加入「里程表數字」(Odometer) 數字動畫，也叫 rolling numbers 或拉霸數字 (slot-machine digits)。
數值變化時，每一位都縱向捲動到新的數字，一律往前捲動，各位之間稍微錯開，結尾有輕微的回穩。
讓每一位數字寬度相同，避免整個數字位移；只提供最終數值給螢幕閱讀器。Animated Map Arcs (動態地圖弧線)
別稱 World Map Animated Lines, Globe Arcs
線條和圓點在地圖或地球上的各個地點之間動態移動。
適用情境
展示全球布局的視覺
在[套用位置]加入「動態地圖弧線」(Animated Map Arcs)，也叫 globe arcs。
曲線在點狀地圖的各地點之間依序畫出，接著往目的地收回，同時目的地有一圈柔和的光環脈動：平靜而穩定。
讓各條弧線錯開時間，絕不同步移動；循環要無縫；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就暫停播放。