Bar Chart Grow (長條圖成長)

隨著數值變化，水平長條的排名隨時間不斷交換。

在[套用位置]加入「長條圖競賽」(Bar Chart Race)，也叫 racing bar chart。
水平長條隨數值隨時間變化而伸縮，每當排名改變時平順地彼此超越，每根長條都帶著自己的標籤。
用 transform 移動長條，而不是重新排列標記結構，讓交換過程是滑動而不是跳動；並提供使用者暫停的方式。

資料變化或切換資料集時，圖表元素從舊值平順過渡到新值。

在[套用位置]加入「圖表資料轉場」(Chart Data Transition)，也叫 chart update animation。
資料變化時，所有長條同時從舊值平順、從容地過渡到新值，而不是從零重新繪製。
每次更新都從畫面上目前的數值開始，這樣快速接連的第二次變化也不會跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即套用新數值。

幾根直條錯開節奏地伸縮，像音訊等化器一樣。

在[套用位置]加入「等化器載入」(Bar Loader (Equalizer)) 動畫，也叫 bars loader 或 audio bars。
幾根直條像音訊等化器一樣彼此錯開節奏地伸縮，節奏輕快但均勻。
循環要無縫銜接，為螢幕閱讀器加上狀態標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。

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

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

環圈或圓餅圖依順時針方向填滿到對應的百分比。

在[套用位置]加入「環圈圖填充」(Donut Chart Fill) 動畫，也叫 pie chart sweep 或 animated donut chart。
從頂端開始，各段依序順時針掃出，直到環圈顯示出各自的占比，結束時平順減速。
圖表進入畫面時只播放一次，並以文字形式提供實際數值給螢幕閱讀器。