Progress

작업 진행 상태를 시각적으로 표시하는 프로그레스 바 컴포넌트입니다.

Installation

bash

npx axis-cli add progress

Usage

tsx

import { Progress } from '@axis-ds/ui-react'

export function Example() {
  return <Progress value={60} />
}

Animated Demo

Variants

Default (25%)

Success (50%)

Warning (75%)

Destructive (90%)

tsx

<Progress value={25} variant="default" />
<Progress value={50} variant="success" />
<Progress value={75} variant="warning" />
<Progress value={90} variant="destructive" />

Sizes

Small

Default

Large

tsx

<Progress value={60} size="sm" />
<Progress value={60} size="default" />
<Progress value={60} size="lg" />

Props

Prop	Type	Default	Description
`value`	`number`	0	현재 진행률
`max`	`number`	100	최대값
`size`	`"sm" \| "default" \| "lg"`	"default"	프로그레스 바 높이
`variant`	`"default" \| "success" \| "warning" \| "destructive"`	"default"	색상 변형
`indeterminate`	`boolean`	false	불확정 상태 (로딩 애니메이션)
`className`	`string`	-	추가 CSS 클래스

value

Type:number

Default:0

현재 진행률

max

Type:number

Default:100

최대값

size

Type:"sm" | "default" | "lg"

Default:"default"

프로그레스 바 높이

variant

Type:"default" | "success" | "warning" | "destructive"

Default:"default"

색상 변형

indeterminate

Type:boolean

Default:false

불확정 상태 (로딩 애니메이션)

className

Type:string

Default:-

추가 CSS 클래스