Bar Chart Grow (바 차트 그로우)

값이 바뀜에 따라 가로 막대의 순위가 시간에 따라 뒤바뀝니다.

[적용할 곳]에 바 차트 레이스(Bar Chart Race)를 넣어 줘. 레이싱 바 차트(racing bar chart)라고도 불러.
시간에 따라 값이 바뀌면 가로 막대가 늘고 줄며, 순위가 바뀔 때마다 서로 부드럽게 미끄러져 자리를 바꾸고, 막대마다 레이블이 따라다니게 해 줘.
자리바꿈이 튀지 않고 미끄러지도록 마크업 순서를 바꾸지 말고 transform으로 막대를 옮기고, 사용자가 멈출 수 있는 방법을 줘.

데이터가 바뀌거나 데이터셋을 전환하면 차트 요소가 이전 값에서 새 값으로 부드럽게 이어집니다.

[적용할 곳]에 차트 데이터 트랜지션(Chart Data Transition)을 넣어 줘. 차트 업데이트 애니메이션(chart update animation)이라고도 불러.
데이터가 바뀌면 0부터 다시 그리지 말고, 모든 막대가 이전 값에서 새 값으로 동시에 부드럽고 여유 있게 옮겨 가게 해 줘.
빠르게 두 번째 변경이 와도 튀지 않게 매번 화면에 보이는 현재 값에서 시작하고, 사용자가 모션 줄이기(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)라고도 불러.
맨 위에서 시작해 각 구간이 차례로 시계 방향으로 채워지며 링이 각자의 비율을 보여 주고, 끝날 때 부드럽게 감속하게 해 줘.
차트가 화면에 들어올 때 한 번만 재생하고, 실제 값은 스크린 리더가 읽을 수 있게 텍스트로 남겨 줘.