Progress

@hua-labs/ui

v1.1.0

작업 완료 또는 로딩 상태를 표시하는 진행 바 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Progress } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 Progress

레이블과 함께

업로드 중...65%

다운로드 중...40%

약 2분 남음

색상 변형

default

success

warning

error

info

글래스 변형

Processing...55%

크기

줄무늬 패턴

애니메이션

처리 중...0%

Props

이름	타입	기본값	설명
`value`	`number`	`0`	진행률 값
`max`	`number`	`100`	최대값
`size`	`"sm" \| "md" \| "lg"`	`"md"`	프로그레스 바 높이
`variant`	`"default" \| "success" \| "warning" \| "error" \| "info" \| "glass"`	`"default"`	색상 변형
`showValue`	`boolean`	`false`	퍼센트 값 표시
`animated`	`boolean`	`true`	애니메이션 활성화
`striped`	`boolean`	`false`	줄무늬 패턴 표시
`label`	`string`	-	프로그레스 바 위 라벨 텍스트
`description`	`string`	-	프로그레스 바 아래 설명 텍스트

코드 예시

기본 사용법

import { Progress } from '@hua-labs/ui';

// Basic progress bar
<Progress value={50} />

// With label and value display
<Progress value={75} label="Upload Progress" showValue />

색상 변형

// Success variant
<Progress value={100} variant="success" />

// Warning variant
<Progress value={60} variant="warning" />

// Error variant
<Progress value={30} variant="error" />

// Glass variant (for overlays)
<Progress value={50} variant="glass" />

줄무늬 패턴

// Striped pattern
<Progress value={70} striped />

// Striped with color
<Progress value={80} variant="info" striped />

접근성

•aria 속성과 함께 role='progressbar' 사용: aria 속성과 함께 role='progressbar' 사용
•aria-valuenow: 현재 값은 aria-valuenow로 노출
•aria-valuemin/max: 최소/최대 값은 aria-valuemin/max로 설정
•aria-labelledby: 레이블은 aria-labelledby로 연결

Skeleton LoadingSpinner