Progress Circle

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

Installation

npx @seed-design/cli add ui:progress-circle

pnpm dlx @seed-design/cli add ui:progress-circle

yarn dlx @seed-design/cli add ui:progress-circle

bun x @seed-design/cli add ui:progress-circle

의존성 설치

npm install @seed-design/lynx-react

yarn add @seed-design/lynx-react

pnpm add @seed-design/lynx-react

bun add @seed-design/lynx-react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:progress-circle
 * @requires @seed-design/lynx-react@>=0.1.0 <1.0.0
 * @requires @seed-design/lynx-css@>=0.1.0 <1.0.0
 **/

import {
  ProgressCircle as SeedProgressCircle,
  type ProgressCircleProps as SeedProgressCircleProps,
} from "@seed-design/lynx-react";

export interface ProgressCircleProps extends SeedProgressCircleProps {}

/**
 * @see https://seed-design.io/lynx/components/progress-circle
 */
export function ProgressCircle(props: ProgressCircleProps) {
  return (
    <SeedProgressCircle.Root {...props}>
      <SeedProgressCircle.Range />
    </SeedProgressCircle.Root>
  );
}

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Usage

import { ProgressCircle } from "@/components/ui/progress-circle";

export function App() {
  return <ProgressCircle tone="brand" size="40" />;
}

Determinate

minValue, maxValue, value를 지정하면 determinate 모드로 동작합니다.

import { ProgressCircle } from "@/components/ui/progress-circle";

export function App() {
  return (
    <ProgressCircle tone="brand" size="40" minValue={0} maxValue={1} value={0.5} />
  );
}

Props

Prop

Type

minValue?number | undefined

maxValue?number | undefined

value?number | undefined

style?CSSProperties | undefined

children?ReactNode

className?string | undefined

웹 버전과의 차이

Lynx 버전은 플랫폼 제약으로 인해 웹(@seed-design/react) 버전과 내부 구현이 다릅니다. API는 동일하게 유지되지만, 아래 차이점을 참고하세요.

	웹 (React)	Lynx
렌더링	SVG `<circle>` + `stroke-dasharray`	CSS `clip-path` 기반 pie sector
애니메이션	CSS `@keyframes` + `animation`	Main thread `requestAnimationFrame` + `setStyleProperty`
Determinate 전환	CSS `transition` (stroke-dashoffset)	Main thread `requestAnimationFrame` 기반 easing 애니메이션
Headless 레이어	`@seed-design/react-headless` 사용	자체 구현 (headless 미사용)
Track	`<ProgressCircle.Track />` SVG circle 렌더링	Root의 CSS `background` + `clip-path`로 대체 (Track 컴포넌트 없음)
다중 인스턴스	CSS 기반 (GPU 가속)	인스턴스별 독립 RAF 루프

성능 주의: Lynx에서 clip-path가 animatable property가 아니므로 JS로 매 프레임 SVG path 문자열을 생성합니다. 다수의 Indeterminate 인스턴스를 동시에 렌더링하면 성능 저하가 발생할 수 있습니다. Lynx에서 SVG + stroke-dasharray 지원이 추가되면 CSS-only 애니메이션으로 전환될 예정입니다.