Progress
끝이 있는 작업의 진행 정도(막대·원형).
- 라이브러리 전용
개요
미리보기
예시
상태
0
20
끝을 모름
완료
오류
연결이 끊겨 멈췄어요. 올린 2장은 남아 있어요.
원형
가장 긴 문구 (es)
이렇게 · 이렇게 하지 않기
- 이렇게 끝이 정해진 작업에만 쓴다. 완료와 오류만 알린다(25%마다 알리지 않는다).
- 이렇게 하지 않기 목표 달성 링이나 하루 활동량 링으로 쓰지 않는다. 첫 가져오기처럼 끝을 모르면 퍼센트 대신 날짜로 말한다(ImportProgress).
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | ReactNode | 사진 3장 올리는 중 | 무엇이 진행 중인지. 항상 보이고 <progress>의 이름이 된다. |
value? | number | — | 0…max. 비우면 indeterminate(네이티브 요소에 value 없음). |
max? | number | — | 기본 100. |
variant? | 'bar' | 'ring' | bar | bar가 기본, ring은 작은 정사각 공간용. 목표·활동 링으로 쓰지 않는다. |
error? | ReactNode | | 멈춘 이유. 막대가 멈추고 값 대신 이 문장이 보인다. polite로 한 번 알린다. |
| 그 밖의 속성 | — | — | className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다. |
접근성
키보드: 대화형 요소가 없다.
- <progress max value> + <label for>. indeterminate면 value를 두지 않는다. aria-valuetext는 “{n}% 완료”.
- 값 변화는 transform(fast)만 쓴다. 동작 줄이기에서 indeterminate 이동은 멈춘다. forced-colors에서 채움은 Highlight.