Progress

파일 업로드나 가져오기처럼 진행 중인 작업의 완료 정도를 보여 줄 때 사용합니다.

미리보기

백분율·개수·대기 상태

Registry 빌드 82%, 테마 토큰 12/16개, 값을 기다리는 진행 표시를 비교합니다.

Registry 빌드82%

테마 토큰12 / 16

데이터 대기 중—

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/progress

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

현재 value와 전체 max를 전달하고 aria-label 또는 aria-labelledby로 작업 이름을 제공하세요. 실제 작업에서는 고정된 예시 수치 대신 진행 상태에 표시 값을 연결합니다.

"use client";

import { Progress } from "@/components/ui/progress";

export default function Example() {
  return <Progress value={72} aria-label="File upload" />;
}

API 레퍼런스

Base UI Progress의 progressbar 시맨틱을 사용합니다. 유효한 max와 value를 정규화하며 value가 없거나 유효하지 않으면 indeterminate 상태로 전달합니다.

컴포넌트	속성	타입	기본값	설명
`Progress`	`value`	`number \| null`	`null`	현재 진행 값이며 0과 max 사이로 정규화됩니다.
`Progress`	`max`	`number`	`100`	0보다 큰 전체 범위입니다. 유효하지 않으면 100을 사용합니다.
`Progress`	`aria-label / aria-labelledby`	`string`	`—`	진행 중인 작업의 접근 가능한 이름입니다.
`Progress`	`getAriaValueText`	`(formattedValue: string, value: number \| null) => string`	`—`	수치 외 설명이 필요한 경우 aria-valuetext를 만듭니다.

미리보기

백분율·개수·대기 상태

설치

사용법

API 레퍼런스

접근성