Themes
Advanced
Utils
Components

Progress

작업의 진행 상태를 표시합니다.

View sourceReport an issueView in Playground
<Box maxWidth="300px">

	<Progress />

</Box>

API Reference

이 컴포넌트는 Progress primitive의 props를 상속받으며 common margin props를 지원합니다.

PropTypeDefault
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을 사용하여 특정 색상을 지정합니다.

<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을 사용하여 불확정 작업의 대략적인 지속 시간을 표시합니다. 지정된 시간이 지나면 진행 막대가 불확정 애니메이션을 시작합니다.

<Progress duration="30s" />

Spinner와 달리 작업의 진행 상태에 대한 시각적 피드백을 제공할 수 있을 때 Progress 컴포넌트를 사용하는 것이 좋습니다.

PreviousPopover
NextRadio
Edit this page on GitHub.