Progress

전체 중 얼마나 진행했는지 막대로 보여요. 몇 초 안에 끝나는 작업에는 쓰지 않아요.

사용 예시

올리는 중

ProgressLabel은 막대의 이름이 되고, ProgressValue는 백분율을 보여요.

사진 12장 올리는 중

tsx

<Progress value={64}>  <ProgressLabel>사진 12장 올리는 중</ProgressLabel>  <ProgressValue /></Progress>

프로젝트 진행률

목록에서는 막대 폭을 맞춰 나란히 비교해요. 끝난 항목은 success로 구분해요.

모바일 앱 개편

결제 화면 정리

알림 설정 추가

tsx

{projects.map(p => (  <Progress key={p.name} value={p.value} color={p.value === 100 ? 'success' : 'brand'}>    <ProgressLabel>{p.name}</ProgressLabel>    <ProgressValue />  </Progress>))}

사용량

한도에 가까워지면 70%부터 warning, 90%부터 danger로 바꿔요. 값을 바꿔 보세요.

저장 공간

tsx

const color = used >= 90 ? 'danger' : used >= 70 ? 'warning' : 'neutral'<Progress value={used} color={color} getAriaValueText={() => `${used}GB / 100GB`}>  <ProgressLabel>저장 공간</ProgressLabel>  <ProgressValue>{() => `${used}GB / 100GB`}</ProgressValue></Progress><NumberField  value={used}  onValueChange={v => setUsed(v ?? 0)}  min={0}  max={100}  step={10}  size="sm"  className="w-32"  aria-label="사용한 용량"  decrementLabel="줄이기"  incrementLabel="늘리기"/>

색

의미가 있는 색은 상태를 알릴 때만 써요.

neutral

brand

info

success

warning

danger

tsx

<Progress value={60} color="neutral" aria-label="neutral" /><Progress value={60} color="brand" aria-label="brand" /><Progress value={60} color="info" aria-label="info" /><Progress value={60} color="success" aria-label="success" /><Progress value={60} color="warning" aria-label="warning" /><Progress value={60} color="danger" aria-label="danger" />

백업하는 중

권장

진행 중인 작업의 이름을 보여요.

지양

막대만 있으면 무엇을 얼마나 했는지 알 수 없어요.

컨트롤

내려받는 중

value

color

값40

tsx

<Progress value={40}>  <ProgressLabel>내려받는 중</ProgressLabel>  <ProgressValue /></Progress>

명세

이름
이름	값	기본
Progress
value	number	-
지금 값이에요.
color	neutral, brand, info, success, warning, danger	brand
막대 색이에요. 남은 양이 위험할 때 warning이나 danger로 바꿔요.
getAriaValueText	(formatted, value) => string	-
스크린 리더가 읽을 값이에요. ProgressValue에 백분율이 아닌 값을 보이면 같은 글을 넘겨요.
aria-label	string	-
ProgressLabel을 쓰지 않을 때 이름이에요.
className	string	-
ProgressLabel
children	ReactNode	-
막대 위 왼쪽에 보이고 Progress의 이름이 돼요.
ProgressValue
children	(formatted, value) => ReactNode	-
값을 직접 적어요. 없으면 백분율을 보여요.