CircularProgress

Feedback & Status

완료량을 알 수 없는 대기를 원형 애니메이션으로 나타내는 인디케이터.

Usage

완료 비율을 알 수 없는 짧은 대기 상태를 원형 애니메이션으로 표시할 때 사용한다.

import

import { CircularProgress } from '@mildang/design-system/Spinner';

API Reference

CircularProgress Props

Prop

Type

Default

children

ReactNode

지정 안 함

color

ColorToken | "currentColor"

primary

panda

SystemStyleObject

지정 안 함

shape

"inherit" | "square" | "round" | "butt"

butt

size

number | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs"

thickness

number

3.6

value

number

variant

"indeterminate" | "determinate"

indeterminate

같은 패밀리

@mildang/design-system/Spinner 에서 같이 내보내는 컴포넌트다.

Spinner

로딩 상태를 나타내는 스피너.

예제

DefaultStory

코드

Open in Playground

import { type ComponentProps } from 'react';
import { CircularProgress } from '@mildang/design-system/Spinner';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    variant: 'indeterminate',
    color: 'positive.fill.base',
    value: 50,
    thickness: 3.6,
    shape: 'butt',
    size: 'xl',
  }) } as ComponentProps<typeof CircularProgress>;

const CircularProgressDefaultStoryExampleRender = (args: ComponentProps<typeof CircularProgress>) => {
    return <CircularProgress {...args} />;
  };

export default function CircularProgressDefaultStoryExample(props: Partial<ComponentProps<typeof CircularProgress>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof CircularProgress>;
  return CircularProgressDefaultStoryExampleRender(mergedProps);
}