Progress Circle

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

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

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

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@^1.0.0
 * @requires @seed-design/lynx-css@^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.Track />
      <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

mainThreadProgress?MainThreadRef<MainThreadProgress> | undefined

ProgressCircle은 기본적으로 진행률 접근성 요소로 노출됩니다. value가 있으면 범위와 현재 값을 전달하고, 없으면 완료 시점을 알 수 없는 상태로 전달합니다. 스크린 리더 문구는 accessibility-value로 바꿀 수 있습니다.

mainThreadProgress는 PullToRefresh처럼 Main Thread에서 진행률을 갱신할 때 사용합니다. Indicator의 render props를 그대로 전달하고, 채널 하나에는 ProgressCircle 하나만 연결하세요. 같은 인스턴스의 value를 동시에 애니메이션하지 마세요.

<ProgressCircle
  minValue={0}
  maxValue={100}
  value={40}
  accessibility-label="파일 업로드"
  accessibility-value="40% 완료"
/>

import "./styles";

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

export default function Example() {
  return (
    <view className="progress-circle-preview--dark">
      <ProgressCircle tone="staticWhite" />
    </view>
  );
}

공개 variant와 진행률 API는 웹과 같습니다.
웹의 ARIA 속성 대신 accessibility-role-description과 accessibility-value를 사용합니다.
완료 시점을 알 수 없는 상태는 엔진 애니메이션으로 원호와 둥근 끝을 회전합니다. JavaScript에서 매 프레임 스타일을 갱신하지 않습니다.
value가 바뀌는 진행률 애니메이션과 mainThreadProgress 갱신은 Main Thread에서 처리합니다.

Progress Circle

Installation

의존성 설치

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

Props

Examples

Neutral

Brand

Static White

Size=40

Size=24

Determinate

Indeterminate

웹 버전과의 차이

목차

Progress Circle

Manual Installation

의존성 설치

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

목차