ProgressBar

Feedback & Status

완료 비율을 가로 막대와 값으로 나타내는 진행 표시줄.

Usage

완료까지 남은 정도를 가로 막대로(업로드·단계 진행)

import

import { ProgressBar } from '@mildang/design-system/Progress';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

ProgressBar Props

Prop

Type

Default

changePoint

number

지정 안 함

color

"brand" | "green" | "orange"

green

indicatorClassName

string

지정 안 함

label

ReactNode

지정 안 함

labelPosition

"none" | "left" | "right" | "top"

none

boolean

false

loadingColor

지정 안 함

rounded

boolean

true

size

"sm" | "md" | "lg"

textColor

"black" | "green"

black

type

"static" | "conditional"

static

value

number

같은 패밀리

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

LinearProgress

작업 진행 정도를 가로 막대 길이로 나타내는 인디케이터.

ProgressCircle

완료 비율을 좁은 공간의 원형 트랙으로 나타내는 진행 인디케이터.

진행률과 로딩

값을 알 수 있을 때는 determinate value를 표시하고, 값을 기다리는 동안은 loading을 사용한다. 값이 도착하면 loading을 끄고 value를 넘겨 전환한다.

기본 사용

값이 있는 진행률과 오른쪽 라벨을 보여준다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ProgressBar } from '@mildang/design-system/Progress';
import { VStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    value: 66,
    size: 'md',
  }) } as ComponentProps<typeof ProgressBar>;

const ProgressBarColorsExampleRender = (args: ComponentProps<typeof ProgressBar>) => (
    <VStack gap="16" width="360px" alignItems="stretch">
      <ProgressBar {...args} size="lg" color="brand" />
      <ProgressBar {...args} size="lg" color="green" />
      <ProgressBar {...args} size="lg" color="orange" />
    </VStack>
  );

export default function ProgressBarColorsExample(props: Partial<ComponentProps<typeof ProgressBar>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ProgressBar>;
  return ProgressBarColorsExampleRender(mergedProps);
}

로딩에서 값으로 전환

loading 상태와 값이 도착한 상태를 전환한다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ProgressBar } from '@mildang/design-system/Progress';
import { VStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    loading: true,
  }) } as ComponentProps<typeof ProgressBar>;

const ProgressBarLoadingExampleRender = (args: ComponentProps<typeof ProgressBar>) => (
    <VStack gap="16" width="360px" alignItems="stretch">
      <ProgressBar {...args} size="sm" />
      <ProgressBar {...args} size="md" />
      <ProgressBar {...args} size="lg" />
    </VStack>
  );

export default function ProgressBarLoadingExample(props: Partial<ComponentProps<typeof ProgressBar>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ProgressBar>;
  return ProgressBarLoadingExampleRender(mergedProps);
}

예제

Sizes

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ProgressBar } from '@mildang/design-system/Progress';
import { VStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    value: 66,
    color: 'brand',
  }) } as ComponentProps<typeof ProgressBar>;

const ProgressBarSizesExampleRender = (args: ComponentProps<typeof ProgressBar>) => (
    <VStack gap="16" width="360px" alignItems="stretch">
      <ProgressBar {...args} size="sm" labelPosition="right" />
      <ProgressBar {...args} size="md" labelPosition="right" />
      <ProgressBar {...args} size="lg" labelPosition="right" />
    </VStack>
  );

export default function ProgressBarSizesExample(props: Partial<ComponentProps<typeof ProgressBar>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ProgressBar>;
  return ProgressBarSizesExampleRender(mergedProps);
}

Conditional

코드

Open in Playground

import { VStack } from '@mildang/styled-system/jsx';
import { ProgressBar } from '@mildang/design-system/Progress';

const ProgressBarConditionalExample = () => (
    <VStack gap="16" width="360px" alignItems="stretch">
      <ProgressBar type="conditional" value={30} size="md" labelPosition="right" />
      <ProgressBar type="conditional" value={79} size="md" labelPosition="right" />
      <ProgressBar type="conditional" value={80} size="md" labelPosition="right" />
      <ProgressBar type="conditional" value={100} size="md" labelPosition="right" />
    </VStack>
  );

export default ProgressBarConditionalExample;

LabelPositions

코드

Open in Playground

import { VStack } from '@mildang/styled-system/jsx';
import { ProgressBar } from '@mildang/design-system/Progress';

const ProgressBarLabelPositionsExample = () => (
    <VStack gap="24" width="360px" alignItems="stretch">
      <ProgressBar value={66} labelPosition="none" size="md" color="brand" />
      <ProgressBar value={66} labelPosition="left" size="md" color="brand" />
      <ProgressBar value={66} labelPosition="right" size="md" color="brand" />
      <ProgressBar value={66} labelPosition="top" size="md" color="brand" />
    </VStack>
  );

export default ProgressBarLabelPositionsExample;

CustomLabel

코드

Open in Playground

import { VStack } from '@mildang/styled-system/jsx';
import { ProgressBar } from '@mildang/design-system/Progress';

const ProgressBarCustomLabelExample = () => (
    <VStack gap="16" width="360px" alignItems="stretch">
      <ProgressBar value={50} labelPosition="right" size="md" color="brand" label="1/2" />
      <ProgressBar value={75} labelPosition="right" size="lg" color="brand" label="3 / 4 단계" />
    </VStack>
  );

export default ProgressBarCustomLabelExample;

TextColors

코드

Open in Playground

import { VStack } from '@mildang/styled-system/jsx';
import { ProgressBar } from '@mildang/design-system/Progress';

const ProgressBarTextColorsExample = () => (
    <VStack gap="16" width="360px" alignItems="stretch">
      <ProgressBar value={66} labelPosition="right" textColor="black" size="md" color="green" />
      <ProgressBar value={66} labelPosition="right" textColor="green" size="md" color="green" />
    </VStack>
  );

export default ProgressBarTextColorsExample;

Rounded

코드

Open in Playground

import { VStack } from '@mildang/styled-system/jsx';
import { ProgressBar } from '@mildang/design-system/Progress';

const ProgressBarRoundedExample = () => (
    <VStack gap="16" width="360px" alignItems="stretch">
      <ProgressBar value={66} rounded size="md" color="brand" />
      <ProgressBar value={66} rounded={false} size="md" color="brand" />
    </VStack>
  );

export default ProgressBarRoundedExample;

LoadingToValue

코드

Open in Playground

import { useEffect, useState } from 'react';
import { css } from '@mildang/styled-system/css';
import { VStack } from '@mildang/styled-system/jsx';
import { ProgressBar } from '@mildang/design-system/Progress';

const ProgressBarLoadingToValueExample = () => {
    const [progress, setProgress] = useState<number | null>(null);
    const [reloadKey, setReloadKey] = useState(0);

    useEffect(() => {
      setProgress(null);
      const timer = setTimeout(() => setProgress(72), 2000);
      return () => clearTimeout(timer);
    }, [reloadKey]);

    const buttonClass = css({
      alignSelf: 'flex-start',
      paddingX: '12',
      paddingY: '6',
      borderRadius: '4',
      borderWidth: '1px',
      borderColor: 'neutral.border.base',
      backgroundColor: 'neutral.surface.low',
      textStyle: 'caption-md-medium',
      color: 'neutral.text.base',
      cursor: 'pointer',
      _hover: { backgroundColor: 'neutral.surface.high' },
    });

    return (
      <VStack gap="16" width="360px" alignItems="stretch">
        <ProgressBar
          loading={progress === null}
          value={progress ?? 0}
          color="brand"
          labelPosition="right"
          size="md"
        />
        <button type="button" className={buttonClass} onClick={() => setReloadKey((k) => k + 1)}>
          다시 로딩
        </button>
      </VStack>
    );
  };

export default ProgressBarLoadingToValueExample;

Default

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ProgressBar } from '@mildang/design-system/Progress';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    value: 66,
    size: 'md',
    labelPosition: 'right',
    loading: false,
  }) } as ComponentProps<typeof ProgressBar>;

export default function ProgressBarDefaultExample(props: Partial<ComponentProps<typeof ProgressBar>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ProgressBar>;
  return <ProgressBar {...mergedProps} />;
}

LoadingColors

코드

Open in Playground

import { ProgressBar } from '@mildang/design-system/Progress';
import { css } from '@mildang/styled-system/css';
import { VStack } from '@mildang/styled-system/jsx';

type LoadingColorToken = NonNullable<import('react').ComponentProps<typeof ProgressBar>['loadingColor']>;

const ProgressBarLoadingColorsExample = () => {
    const label = css({ textStyle: 'title-xs', marginBottom: '8' });
    const items: Array<{ name: string; loadingColor?: LoadingColorToken }> = [
      { name: 'default (파랑)' },
      { name: 'brand.fill.base', loadingColor: 'brand.fill.base' },
      { name: 'positive.fill.base', loadingColor: 'positive.fill.base' },
      { name: 'warning.fill.base', loadingColor: 'warning.fill.base' },
      { name: 'neutral.fill.base', loadingColor: 'neutral.fill.base' },
    ];
    return (
      <VStack gap="16" width="360px" alignItems="stretch">
        {items.map(({ name, loadingColor }) => (
          <div key={name}>
            <div className={label}>{name}</div>
            <ProgressBar loading size="lg" loadingColor={loadingColor} />
          </div>
        ))}
      </VStack>
    );
  };

export default ProgressBarLoadingColorsExample;