프로그레스

프로그레스 (Progress)

작업이 얼마나 진행되었는지를 보여주는 표시기예요. 보통 진행률 막대 형태로 그려지며, 파일 업로드나 다운로드, 설치 과정처럼 완료까지의 경과를 사용자에게 알려줄 때 사용해요.

출처: 문서

본문

설치하기

npx shadcn@latest add progress

npm install @radix-ui/react-progress

사용하기

컴포넌트를 import 하고,

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

value prop에 현재 진행도를 숫자로 넘겨주면 돼요. 0에서 100 사이의 값을 넣어요.

<Progress value={33} />

더 알아보기 (Learn more)

• Radix UI Progress — 프로그레스 프리미티브와 API 레퍼런스