피드백

진행 또는 카운트다운을 나타내며 오른쪽에서 왼쪽으로 이동합니다.

사용법
프로퍼티

import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};

프로퍼티	유형	설명	기본값
지속 시간	숫자	진행 표시줄 애니메이션의 전체 지속시간 (밀리초 단위)	3
지연	숫자	진행 표시줄 애니메이션 시작 지연 시간 (밀리초 단위)	0
이징	문자열	진행 표시줄 애니메이션을 위한 이징 함수	easeInOut
barHeight	숫자	바의 높이 (픽셀 단위)	24
barColor	문자열	바의 색상	gray80
autoStart	부울	`true`이면, 컴포넌트가 마운트될 때 진행 표시줄 애니메이션이 자동으로 시작됩니다.	`참`

원형 진행 표시줄

작업의 진행 상황을 나타내며, 로딩 화면이나 진행 중인 프로세스를 사용자에게 전달하고자 할 때 자주 사용됩니다.

사용법
프로퍼티

import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};

Welcome

Core Concepts

원형 진행 표시줄

​원형 진행 표시줄

원형 진행 표시줄