진행률

업로드, 설치, 여러 단계로 이루어진 온보딩 등 작업이 완료될 때마다 채워지는 얇은 막대로, 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.

"use client"

import * as React from "react"

프로그레스 바는 작업이 얼마나 끝났는지 보여 줍니다. 0에서 100까지 채워지는 트랙입니다. Base UI Progress 프리미티브를 기반으로 하며, 두꺼운 테두리, 선명한 그림자, 단색 채움으로 네오브루탈리즘 공식을 입혔습니다.

다음과 같은 경우에 사용합니다.

파일 업로드·다운로드 — 바이트 기준의 확정 진행률과 보이는 백분율.
다단계 흐름 — 온보딩, 결제, 마법사에서 사용자가 어디까지 왔는지 표시합니다.
오래 걸리는 작업 — 서버가 완료도를 알려 주는 가져오기, 내보내기, 설치.

설치


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
npx shadcn@latest add https://neobrutalism.com/r/base/progress.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/progress.json

다음 의존성을 설치합니다.


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

다음 코드를 복사해서 프로젝트에 붙여넣습니다.

components/ui/progress.tsx

"use client"

import * as React from "react"
import { Progress as ProgressPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "relative flex h-4 w-full items-center overflow-hidden rounded border-2 bg-background",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="size-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }

import 경로를 프로젝트 구성에 맞게 수정합니다.

사용법

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

<Progress value={33} />

구성

라벨과 값 포함

ProgressLabel과 ProgressValue를 사용해서 라벨과 값을 표시합니다.

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

예제

라벨

ProgressLabel과 ProgressValue를 사용해서 라벨과 값을 표시합니다.

Upload progress

import {
  Progress,
  ProgressLabel,

제어

슬라이더로 제어할 수 있는 프로그레스 바입니다.

"use client"

import * as React from "react"

RTL

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

تقدم الرفع

"use client"

import * as React from "react"

프로그레스는 상태 표시이지 컨트롤이 아닙니다. 포커스를 받지 않으며 키보드 상호작용도 없습니다. Base UI는 aria-valuemin, aria-valuemax, aria-valuenow가 있는 role="progressbar"를 렌더링하고, ProgressLabel은 aria-labelledby로 자동 연결됩니다. 백분율만이 아니라 무엇이 로딩 중인지 읽히도록 레이블(또는 aria-label)을 쓰세요. 완료도를 모를 때는 value={null}을 전달하면 바가 불확정 상태로 바뀝니다.

API 참조

자세한 내용은 Base UI 문서를 참고하세요.