프로그레스

프로그레스 (Progress)

작업과 관련된 진행률 표시줄(progress bar)을 보여 주는 컴포넌트예요. Progress 프리미티브의 props를 상속받아요.

출처: 문서

본문

작업과 관련된 진행률 표시줄을 표시해요.

<Box maxWidth="300px">
  <Progress />
</Box>

API Reference

이 컴포넌트는 Progress 프리미티브의 props를 상속받으며 공통 margin props를 지원해요.

Prop Type Default
size Responsive<"1" | "2" | "3"> "2"
variant "classic" | "surface" | "soft" "surface"
color enum No default value
highContrast boolean No default value
radius "none" | "small" | "medium" | "large" | "full" No default value
duration string No default value

예제 (Examples)

Size

size prop으로 크기를 제어해요.

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} size="1" />

  <Progress value={50} size="2" />

  <Progress value={75} size="3" />
</Flex>

Variant

variant prop으로 시각적 스타일을 제어해요.

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} variant="classic" />

  <Progress value={50} variant="surface" />

  <Progress value={75} variant="soft" />
</Flex>

Color

color prop으로 특정 color를 지정해요.

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={20} color="indigo" />

  <Progress value={40} color="cyan" />

  <Progress value={60} color="orange" />

  <Progress value={80} color="crimson" />
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

<Grid columns="2" gap="4">
  <Progress value={10} color="indigo" />

  <Progress value={10} color="indigo" highContrast />

  <Progress value={30} color="cyan" />

  <Progress value={30} color="cyan" highContrast />

  <Progress value={50} color="orange" />

  <Progress value={50} color="orange" highContrast />

  <Progress value={70} color="crimson" />

  <Progress value={70} color="crimson" highContrast />

  <Progress value={90} color="gray" />

  <Progress value={90} color="gray" highContrast />
</Grid>

Radius

radius prop으로 특정 radius 값을 지정해요.

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} radius="none" />

  <Progress value={50} radius="small" />

  <Progress value={75} radius="full" />
</Flex>

With controlled value

value prop으로 작업 진행률을 정확하게 표시해요.

<Progress value={75} />

With custom duration

duration prop으로 불확정(indeterminate) 작업의 대략적인 소요 시간을 나타내요. 시간이 초과되면 표시줄이 불확정 애니메이션을 시작해요.

<Progress duration="30s" />

대략적인 소요 시간을 예상할 수 있을 때는, 작업 진행에 대한 시각적 단서를 전혀 제공하지 않는 Spinner보다 Progress 컴포넌트가 여전히 더 유용해요.

더 알아보기 (Learn more)