Progress

작업의 완료 진행률을 나타내는 인디케이터를 표시하는 컴포넌트로, 보통 진행바로 표시돼요.

출처: 문서

본문

작업의 진행 상태를 시각적 진행바와 보조 기술(스크린 리더) 양쪽으로 전달해 주는 컴포넌트예요. 보조 기술이 작업 진행률을 읽을 수 있는 맥락을 제공해요.

모든 파트를 임포트해 조립해요.

import { Progress } from "radix-ui";

export default () => (
  <Progress.Root>
    <Progress.Indicator />
  </Progress.Root>
);

모든 진행(progress) 파트를 담아요.

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value

진행률을 시각적으로 보여 주는 데 사용해요. 또한 진행률을 보조 기술에 접근 가능하게 만들어요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value