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。
从顶部开始，各段依次顺时针扫出，直到圆环显示出各自的占比，结束时平滑减速。
图表进入视口时只播放一次，并以文本形式为屏幕阅读器提供实际数值。