React
Progress Circle
작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 데 사용됩니다.
사용 가능 버전@seed-design/react@0.0.1, @seed-design/css@0.0.1
import { ProgressCircle } from "seed-design/ui/progress-circle";
export default function ProgressCirclePreview() {
return <ProgressCircle tone="neutral" size="40" />;
}Installation
npx @seed-design/cli@latest add ui:progress-circlepnpm dlx @seed-design/cli@latest add ui:progress-circleyarn dlx @seed-design/cli@latest add ui:progress-circlebun x @seed-design/cli@latest add ui:progress-circle의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:progress-circle
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import { ProgressCircle as SeedProgressCircle } from "@seed-design/react";
import * as React from "react";
export interface ProgressCircleProps extends SeedProgressCircle.RootProps {}
/**
* @see https://seed-design.io/react/components/progress-circle
*/
export const ProgressCircle = React.forwardRef<SVGSVGElement, ProgressCircleProps>((props, ref) => {
return (
<SeedProgressCircle.Root ref={ref} {...props}>
<SeedProgressCircle.Track />
<SeedProgressCircle.Range />
</SeedProgressCircle.Root>
);
});
ProgressCircle.displayName = "ProgressCircle";
/**
* 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
Examples
Neutral
import { ProgressCircle } from "seed-design/ui/progress-circle";
export default function ProgressCircleNeutral() {
return <ProgressCircle tone="neutral" />;
}Brand
import { ProgressCircle } from "seed-design/ui/progress-circle";
export default function ProgressCircleBrand() {
return <ProgressCircle tone="brand" />;
}Static White
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
import { ProgressCircle } from "seed-design/ui/progress-circle";
export default function ProgressCircle40() {
return <ProgressCircle size="40" />;
}Size=24
import { ProgressCircle } from "seed-design/ui/progress-circle";
export default function ProgressCircle24() {
return <ProgressCircle size="24" />;
}Determinate
import { ProgressCircle } from "seed-design/ui/progress-circle";
export default function ProgressCircleDeterminate() {
return <ProgressCircle minValue={0} maxValue={100} value={40} />;
}Indeterminate
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} />;
}Last updated on