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)이라고도 불러.
데이터가 바뀌면 0부터 다시 그리지 말고, 모든 막대가 이전 값에서 새 값으로 동시에 부드럽고 여유 있게 옮겨 가게 해 줘.
빠르게 두 번째 변경이 와도 튀지 않게 매번 화면에 보이는 현재 값에서 시작하고, 사용자가 모션 줄이기(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)라고도 불러.
숫자가 화면에 들어오면 0부터 목표 값까지 세되, 처음엔 빠르다가 도착할 때 부드럽게 느려지게 해 줘.
주변이 흔들리지 않게 고정폭 숫자를 쓰고, 한 번만 세고, 스크린 리더와 모션 줄이기(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)를 켜 두었으면 멈춰 줘.