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

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

Lynx Engine 최소 버전: 3.6

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

## Preview

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { ProgressCircle, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="progress-circle-preview">
        <ProgressCircle.Root tone="neutral" size="40">
          <ProgressCircle.Range />
        </ProgressCircle.Root>
      </view>
    </page>
  );
}

root.render(<Root />);
```

## Installation

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

## Props

## Examples

### Neutral

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { ProgressCircle, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="progress-circle-preview">
        <ProgressCircle.Root tone="neutral">
          <ProgressCircle.Range />
        </ProgressCircle.Root>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Brand

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { ProgressCircle, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="progress-circle-preview">
        <ProgressCircle.Root tone="brand">
          <ProgressCircle.Range />
        </ProgressCircle.Root>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Static White

`staticWhite`는 어두운 배경 위에서 사용합니다.

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { ProgressCircle, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="progress-circle-preview progress-circle-preview--dark">
        <ProgressCircle.Root tone="staticWhite">
          <ProgressCircle.Range />
        </ProgressCircle.Root>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Size=40

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { ProgressCircle, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="progress-circle-preview">
        <ProgressCircle.Root size="40">
          <ProgressCircle.Range />
        </ProgressCircle.Root>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Size=24

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { ProgressCircle, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="progress-circle-preview">
        <ProgressCircle.Root size="24">
          <ProgressCircle.Range />
        </ProgressCircle.Root>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Determinate

`minValue`, `maxValue`, `value`를 모두 지정하면 정해진 진행률을 표시합니다.

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { ProgressCircle, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="progress-circle-preview">
        <ProgressCircle.Root minValue={0} maxValue={100} value={40}>
          <ProgressCircle.Range />
        </ProgressCircle.Root>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Indeterminate

`value`를 생략하면 완료 시점을 알 수 없는 작업의 진행 상태를 표시합니다.

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { ProgressCircle, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="progress-circle-preview">
        <ProgressCircle.Root>
          <ProgressCircle.Range />
        </ProgressCircle.Root>
      </view>
    </page>
  );
}

root.render(<Root />);
```

## 웹 버전과의 차이

Lynx 버전은 플랫폼 제약으로 인해 웹(`@seed-design/react`) 버전과 내부 구현이 다릅니다. 공개 variant와 진행률 API는 같지만 조합 방식과 렌더링 방식에 차이가 있습니다.

|                    | 웹 (React)                             | Lynx                                                        |
| ------------------ | ------------------------------------- | ----------------------------------------------------------- |
| **조합 방식**          | 단일 `ProgressCircle` 컴포넌트              | `ProgressCircle.Root`와 `ProgressCircle.Range` 조합            |
| **렌더링**            | SVG `<circle>`과 `stroke-dasharray`    | CSS `clip-path` 기반 pie sector                               |
| **애니메이션**          | CSS `@keyframes`와 `animation`         | Main thread `requestAnimationFrame`과 `setStyleProperty`     |
| **Determinate 전환** | CSS `transition`                      | Main thread `requestAnimationFrame` 기반 easing 애니메이션         |
| **Track**          | `<ProgressCircle.Track />` SVG circle | Root의 CSS `background`와 `clip-path`로 렌더링하며 별도 Track 컴포넌트 없음 |

<Callout type="warn">
  Lynx에서는 `clip-path`가 애니메이션 속성이 아니어서 매 프레임 path 문자열을 만듭니다. Indeterminate 인스턴스를 한 화면에 많이 렌더링하면 성능이 저하될 수 있습니다.
</Callout>