Bar Chart Grow (バーチャートグロウ)

値の変化に合わせて、横棒の順位が時間とともに入れ替わります。

[適用する場所]にバーチャートレース(Bar Chart Race)を追加してください。レーシングバーチャート(racing bar chart)とも呼ばれます。
時間とともに値が変わるにつれて横棒が伸び縮みし、順位が変わるたびに滑らかにすれ違うようにして、各バーのラベルは付いたままにしてください。
入れ替わりが飛ばずに滑るよう、マークアップを並べ替えるのではなくtransformでバーを動かし、ユーザーが一時停止できるようにしてください。

データが変わったりデータセットを切り替えたりすると、グラフの要素が古い値から新しい値へ滑らかに補間されます。

[適用する場所]にチャートデータトランジション(Chart Data Transition)を追加してください。チャートアップデートアニメーション(chart update animation)とも呼ばれます。
データが変わったら、ゼロから描き直すのではなく、すべてのバーが古い値から新しい値へ同時に、滑らかに落ち着いたペースで移るようにしてください。
素早く2回目の変更が来ても飛ばないよう各更新は画面上の現在の値から始め、ユーザーがモーションを減らす設定(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)とも呼ばれます。
上端から始めて、各セグメントが順番に時計回りに広がり、リングがそれぞれの割合を示すまで進み、終わりに滑らかに減速するようにしてください。
グラフが画面に入ったときに一度だけ再生し、実際の値はスクリーンリーダー向けにテキストとして読めるようにしてください。