AXIS
Components/Progress

Progress

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

Installation

bash
npx @axis-ds/cli add progress

Usage

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

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

Interactive Demo

0%

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" />

Indeterminate

진행률을 알 수 없을 때는 트랙 폭 1/3 의 막대가 왕복합니다. 움직임 줄이기 설정에서는 멈추지 않고 느리게(1.5초 → 4초) 왕복해 처리 중임을 알립니다. keyframes 는 @axis-ds/tokens 가 정의합니다(Tailwind 3 preset · Tailwind 4 진입점).

tsx
<Progress indeterminate aria-label="불러오는 중" />

Sizes

Small

Default

Large

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

Props

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 클래스

Accessibility

진행 상태를 나타내는 표시기입니다.

  • role="progressbar"와 aria-valuenow / aria-valuemin / aria-valuemax를 제공하세요.
  • 의미를 보조기술에 전달하도록 접근 가능한 이름(aria-label)을 부여하세요.