Progress Circle

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

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

Lynx 예제를 불러오는 중입니다.

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

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.
 */

Props

Prop

Type

minValue?number | undefined

maxValue?number | undefined

value?number | undefined

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

Examples

Neutral

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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는 어두운 배경 위에서 사용합니다.

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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를 모두 지정하면 정해진 진행률을 표시합니다.

Lynx 예제를 불러오는 중입니다.

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를 생략하면 완료 시점을 알 수 없는 작업의 진행 상태를 표시합니다.

Lynx 예제를 불러오는 중입니다.

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 컴포넌트 없음

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

Progress Circle

Manual Installation

의존성 설치

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

목차