Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Progress

진행 상태를 표시하는 프로그레스 컴포넌트입니다.

import { Progress } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

페이지 또는 데이터의 진행 상태를 표시할 때

사용예제

50percent

20%

Bar Type Usage

막대형 프로그레스 사용 예시입니다.

50percent

20%

Dashboard Type Usage

대시보드 프로그레스 사용 예시입니다.

import { Progress } from "sud-ui";

export default function App() {
  return (
    <div className="flex justify-center gap-[20px]">
      <Progress type="dashboard" value={50} max={100} unit="percent" />
      <Progress
        type="dashboard"
        value={20}
        max={100}
        unit="%"
        colorType="forest"
      />
      <Progress type="dashboard" value={70} max={100} colorType="orange" />
    </div>
  );
}

View Text Option

텍스트 표시 여부를 설정합니다.

import { Progress } from "sud-ui";

export default function App() {
  return (
    <div className="flex flex-col items-center justify-center gap-[20px]">
      <div className="flex items-center justify-center gap-[20px]">
        <Progress type="circle" value={50} max={100} showText={false} />
        <Progress type="dashboard" value={20} max={100} showText={false} />
      </div>
      <Progress value={50} max={100} showText={false} />
    </div>
  );
}

State Progress

상태 프로그레스 사용 예시입니다.

import { Progress, DotSpinner, Button } from "sud-ui";
import { CheckCircleFill } from "sud-icons";
import { useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [value, setValue] = useState(0);

  const handleLoading = () => {
    setIsLoading(true);
    setValue(0);
    const interval = setInterval(() => {
      setValue((prev) => {
        if (prev >= 100) {
          clearInterval(interval);
          setTimeout(() => {
            setIsLoading(false);
          }, 1000);
          return 100;
        }
        return prev + 1;
      });
    }, 30);
  };

  return (
    <div className="flex flex-col items-center justify-center gap-[20px]">
      {isLoading ? (
        <>
          <DotSpinner />
          <div className="flex flex-col items-center justify-center gap-[20px]">
            <div className="flex items-center justify-center gap-[20px]">
              <Progress
                type="circle"
                value={value}
                iconWhenFull={<CheckCircleFill />}
              />
              <Progress
                type="dashboard"
                value={value}
                iconWhenFull={<CheckCircleFill />}
              />
            </div>
            <Progress value={value} iconWhenFull={<CheckCircleFill />} />
          </div>
        </>
      ) : (
        <Button onClick={handleLoading}>Start Loading</Button>
      )}
    </div>
  );
}

50percent

20%

Circle Type Usage

원형 프로그레스 사용 예시입니다.

import { Progress } from "sud-ui";

export default function App() {
  return (
    <div className="flex justify-center gap-[20px]">
      <Progress type="circle" value={50} max={100} unit="percent" />
      <Progress
        type="circle"
        value={20}
        max={100}
        unit="%"
        colorType="forest"
      />
      <Progress type="circle" value={70} max={100} colorType="orange" />
    </div>
  );
}

Bar Type Text Position

막대형 프로그레스 텍스트 위치 사용 예시입니다.

import { Progress } from "sud-ui";

export default function App() {
  return (
    <div className="flex flex-col justify-center gap-[20px]">
      <Progress value={50} max={100} valuePosition="inside-start" />
      <Progress
        value={50}
        max={100}
        colorType="rose"
        valuePosition="outside-left"
      />
      <Progress
        value={20}
        max={100}
        colorType="forest"
        valuePosition="inside-center"
      />
      <Progress
        value={70}
        max={100}
        colorType="orange"
        valuePosition="inside-end"
      />
      <Progress
        value={70}
        max={100}
        colorType="cool-gray"
        valuePosition="outside-right"
      />
    </div>
  );
}

Full & Not Full Icon

최대값 도달 & 미달 시 표시할 아이콘을 설정합니다.

import { Progress } from "sud-ui";
import { CheckCircleFill, MoodSmileFill, XMarkCircleFill } from "sud-icons";

export default function App() {
  return (
    <div className="flex flex-col items-center justify-center gap-[20px]">
      <div className="flex items-center justify-center gap-[20px]">
        <Progress
          type="circle"
          value={100}
          max={100}
          iconWhenFull={<CheckCircleFill />}
        />
        <Progress
          type="dashboard"
          value={20}
          max={100}
          colorType="red"
          iconWhenNotFull={<XMarkCircleFill />}
        />
      </div>
      <Progress value={100} max={100} iconWhenFull={<MoodSmileFill />} />
      <Progress
        value={100}
        max={100}
        valuePosition="outside-right"
        iconWhenFull={<CheckCircleFill />}
      />
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

type

프로그레스 타입

bar

circle

dashboard

bar

value

현재 값

number

max

최대 값

number

100

unit

값 단위

string

showText

텍스트 표시 여부

boolean

true

iconWhenFull

최대값 도달 시 표시할 아이콘

ReactNode

iconWhenNotFull

최대값 미달 시 표시할 아이콘

ReactNode

colorType

프로그레스 색상 타입

default

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

cerulean

backgroundColor

배경색(palette값 또는 HEX code)

string

color

프로그레스 색상(palette값 또는 HEX code)

string

valuePosition

값 위치

inside-start

inside-center

inside-end

outside-left

outside-right

inside-end

size

크기

fontSize

글자 크기

number

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

개인정보 처리방침

서비스 약관