# Progress Circle
URL: /react/components/progress-circle
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/progress-circle.mdx

작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 데 사용됩니다.

사용 가능 버전: @seed-design/react@0.0.1, @seed-design/css@0.0.1

## Preview

```tsx
import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCirclePreview() {
  return <ProgressCircle tone="neutral" size="40" />;
}
```

## Installation

- npm: npx @seed-design/cli@latest add ui:progress-circle
- pnpm: pnpm dlx @seed-design/cli@latest add ui:progress-circle
- yarn: yarn dlx @seed-design/cli@latest add ui:progress-circle
- bun: bun x @seed-design/cli@latest add ui:progress-circle

## Props

## Examples

### Neutral

```tsx
import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircleNeutral() {
  return <ProgressCircle tone="neutral" />;
}
```

### Brand

```tsx
import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircleBrand() {
  return <ProgressCircle tone="brand" />;
}
```

### Static White

```tsx
import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircleStaticWhite() {
  return (
    <div
      style={{
        display: "flex",
        width: "100%",
        minHeight: "200px",
        alignItems: "center",
        justifyContent: "center",
        background: "black",
      }}
    >
      <ProgressCircle tone="staticWhite" />
    </div>
  );
}
```

### Size=40

```tsx
import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircle40() {
  return <ProgressCircle size="40" />;
}
```

### Size=24

```tsx
import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircle24() {
  return <ProgressCircle size="24" />;
}
```

### Determinate

```tsx
import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircleDeterminate() {
  return <ProgressCircle minValue={0} maxValue={100} value={40} />;
}
```

### Indeterminate

```tsx
import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCirclePreview() {
  // if you want to show an indeterminate progress circle, you can pass `undefined` or omit the `value` prop
  return <ProgressCircle value={undefined} />;
}
```