reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/Progress

Progress

Component

진행률 표시. Linear/Circular, determinate/indeterminate 변형과 안전하게 보정된 ARIA 값을 지원합니다.

indicator
Related docs
bun add @reopt-ai/opt-ui
100%

Linear Progress

With Label

다운로드 중30%
업로드 중65%
완료100%

Variants

60%
60%
60%
60%

Circular Progress

50%
75%

Circular Variants

70%
70%
70%
70%

값을 알 수 없는 진행 상태

데이터 동기화 중
분석 준비 중

value를 생략하거나 indeterminate를 지정하면 값 관련 ARIA 속성 없이 진행 중 상태만 안내합니다.

Animation Demo

파일 업로드0%
0%

Progress

PropTypeDefaultDescription
valuenumber—현재 값. 생략하면 indeterminate 상태
maxnumber100최대 값
size"sm" | "md" | "lg""md"진행바 높이
variant"default" | "success" | "warning" | "error""default"색상 변형
showLabelbooleanfalse퍼센트 표시
labelstring—레이블 텍스트
animatedbooleantrue애니메이션 활성화
indeterminatebooleanfalse값을 알 수 없는 진행 상태

CircularProgress

PropTypeDefaultDescription
valuenumber—현재 값. 생략하면 indeterminate 상태
maxnumber100최대 값
sizenumber48원 크기 (px)
strokeWidthnumber4선 두께
variant"default" | "success" | "warning" | "error""default"색상 변형
showLabelbooleanfalse중앙에 퍼센트 표시
labelstring—접근성 레이블
indeterminatebooleanfalse값을 알 수 없는 진행 상태

컴포넌트 의존 관계

깊이
▲ USED BY (2)project-settingsuser-detailProgress
View test results

테스트 커버리지

2026년 7월 9일8/8 통과
8성공
0실패
8전체
  • progressbar role을 렌더링한다
  • aria 속성을 설정한다
  • label을 표시한다
  • 범위를 벗어난 값을 aria와 표시값 모두에서 클램프한다
  • max가 0이어도 NaN 퍼센트를 노출하지 않는다
  • 비정상 숫자 입력을 접근성 값에 노출하지 않는다
  • variant에 따른 스타일을 적용한다
  • value를 생략하면 indeterminate progressbar로 렌더링한다

Blocks that use this component

ProjectSettings

프로젝트 설정 Surface. SettingsForm + DataTable + CodeSnippetViewer + Retention Policy + Cleanup Preview + Storage Usage 조합.

Display

UserDetail

사용자 상세 프로필 Surface. Avatar + StatCard + GaugeChart + Progress + DataTable + FilterBar 조합.

Display

Related components

Kbd

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

Indicator

StatCard

단일 지표를 값·변화량·보조 설명으로 표시하는 통계 카드. 비교 기준이 없으면 변화량 줄을 렌더하지 않는다.

Indicator

CompositeZone

Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.

Indicator

Toolbar

툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.

Indicator

Badge

인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.

Indicator

Spinner

로딩 상태 표시 스피너. 3가지 크기와 장식용 aria-hidden 모드를 지원합니다.

Indicator
PreviousAvatarNextMeter

기본 사용

Project Settings

Project Settings

API Keys

NameAPI KeyCreated
Productionpk_live_abc123...2024-01-15
Developmentpk_test_xyz789...2024-02-01

SDK Integration

Installation
1npm install @reopt-ai/sdk\n\nimport { init } from '@reopt-ai/sdk';\ninit({ apiKey: 'pk_live_abc123' });

Data Retention Policy

Choose how long to keep your project data before automatic cleanup.

빈 상태

Project Settings

No settings configured

Project settings will appear here once configured.