Progress

한눈에#

진행 정도를 막대로 보여주는 표시기입니다 — 끝을 아는 결정 모드(0–100)와 끝을 모르는 불명(indeterminate) 모드 두 가지로 동작합니다.

72%

진행 중

• 결정·불명 2모드
• role=progressbar
• aria-value 트리오
• transform만

결정 모드는 value만큼 채우고, 불명 모드는 바 일부가 왕복합니다

사용 시점#

진행률이나 진행 중 상태를 막대로 보여야 하면 Progress — 단순 대기나 골격 유지는 다른 컴포넌트입니다.

화면 단위 판단은 Loading Feedback을 따릅니다. Progress는 작업 진행 상태가 주 관심사일 때 쓰고, 단순 대기나 콘텐츠 자리 유지는 각각 Spinner·Skeleton으로 분리합니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

Progress를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

변형#

72%

진행 중

• 결정 모드 — value(0–100)만큼 바를 채웁니다. 범위 밖 값은 자동 클램프
• indeterminate — 전체 소요를 모를 때. 바 일부가 왕복하고 value는 무시됩니다
• showValue — 우측에 퍼센트(불명 모드에서는 ‘진행 중’) 텍스트를 붙입니다

크기#

size prop이 없습니다 — 트랙 높이는 space.2(8px) 고정, 폭은 부모를 채웁니다.

상태#

• 결정 모드의 바 폭 변화는 duration.normal 트랜지션으로 부드럽게 이어집니다
• prefers-reduced-motion: reduce에서는 왕복 애니메이션이 정지합니다 — 진행 중이라는 사실은 showValue의 ‘진행 중’ 라벨로 전달하세요

Props#

접근성#

• role="progressbar" + aria-valuemin/max/now — 보조기술이 진행률을 읽습니다
• indeterminate면 aria-valuenow를 생략 — “진행률 불명”이 표준 방식으로 전달됩니다
• 기본 aria-label은 ‘진행률’ — 문맥에 맞게 label로 바꾸세요 (예: ‘업로드 진행률’)
• 모션은 transform만 사용(컴포지터 친화), reduced-motion에서 정지

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).