컴포넌트FOX · Progress
진행 표시
얼마나 왔는지, 지금 기다려야 하는지를 알려 줘요. 끝이 정해진 일은 막대와 단계로, 끝을 모르는 일은 도는 네모로 보여 줘요.
막대
끝이 정해진 일에 써요. 칸 막대는 네모 칸이 하나씩 켜져서 얼마나 남았는지 세기 쉬워요.
BAR
<Progress value={60} />
<Progress value={60} appearance="blocks" segments={10} />불러오는 중
얼마나 걸릴지 모를 때는 value를 비워요. 계단처럼 끊어서 움직여요.
LOADING
<Progress />
<Progress appearance="blocks" />단계 표시
가입이나 신청처럼 단계가 정해진 흐름에 써요. 지금 단계는 먹색, 지난 단계는 보라색이에요.
STEPS
1/4
2/4
4/4
<StepIndicator current={2} total={4} />네모 스피너
버튼이나 작은 영역 안에서 기다릴 때 써요. 크기는 세 가지예요.
SPINNER
sm
md
lg
<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />이렇게 써요
2/4
이렇게단계가 정해져 있으면 몇 번째인지 숫자도 같이 보여 줘요.
이렇게 말고단계가 정해진 일에 끝없이 도는 막대를 쓰면 언제 끝나는지 알 수 없어요.
속성
| 속성 | 값 | 기본값 | 설명 |
|---|---|---|---|
Progress.value | 0 ~ 100 | 없음 | 비우면 불러오는 중 모양이 된다 |
Progress.appearance | "bar" | "blocks" | bar | 매끈한 막대 또는 네모 칸 |
Progress.segments | number | 10 | blocks일 때 칸 수 |
Progress.label | string | 진행 상태 | 화면 읽기 도구가 읽을 이름 |
StepIndicator.current / total | number | 없음 | 지금 단계(1부터)와 전체 단계 |
Spinner.size | "lg" | "md" | "sm" | md | 40, 24, 16px |