Progress

설치

pnpm dlx ply-ui add progress

공통 설치 설정을 먼저 적용합니다.

사용법

value에 진행 수치를 전달하고 max로 최댓값을 지정합니다.

Root 안의 Label/Value와 Track/Indicator가 같은 상태를 사용합니다.

구성

구성 요소	역할
`Root`	작업 진행값을 관리합니다. 진행률을 모르면 `value={null}`을 전달합니다.
`Label / Value`	작업 이름과 진행값입니다.
`Track`	진행률 전체 범위입니다.
`Indicator`	완료된 비율을 표시합니다.

진행률을 모를 때

value={null}로 진행률을 알 수 없는 상태를 표시합니다.

구현 코드

components/ui/progress.tsx

progress.tsx

"use client";

import type { ComponentProps } from "react";
import { Progress as Primitive } from "@base-ui/react/progress";
import { withClassName } from "../../lib/cx";
import "./progress.css";

// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function ProgressRoot({
  className,
  ...props
}: ComponentProps<typeof Primitive.Root>) {
  return (
    <Primitive.Root
      {...props}
      className={withClassName("rbx-progress", className)}
    />
  );
}

function ProgressLabel({
  className,
  ...props
}: ComponentProps<typeof Primitive.Label>) {
  return (
    <Primitive.Label
      {...props}
      className={withClassName("rbx-label", className)}
    />
  );
}

function ProgressValue({
  className,
  ...props
}: ComponentProps<typeof Primitive.Value>) {
  return (
    <Primitive.Value
      {...props}
      className={withClassName("rbx-description", className)}
    />
  );
}

function ProgressTrack({
  className,
  ...props
}: ComponentProps<typeof Primitive.Track>) {
  return (
    <Primitive.Track
      {...props}
      className={withClassName("rbx-progress-track", className)}
    />
  );
}

function ProgressIndicator({
  className,
  ...props
}: ComponentProps<typeof Primitive.Indicator>) {
  return (
    <Primitive.Indicator
      {...props}
      className={withClassName("rbx-progress-indicator", className)}
    />
  );
}

// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const Progress = {
  ...Primitive,
  Root: ProgressRoot,
  Label: ProgressLabel,
  Value: ProgressValue,
  Track: ProgressTrack,
  Indicator: ProgressIndicator,
};

components/ui/progress.css

progress.css

/* Progress: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-progress {
  display: grid;
  gap: 8px;
  width: 100%;
}
.rbx-progress-track {
  height: 6px;
  width: 100%;
  overflow: hidden;
  border-radius: 99px;
  background: var(--rbx-color-shift-300);
}
.rbx-progress-indicator {
  height: 100%;
  background: var(--rbx-color-system-emphasis);
  border-radius: inherit;
  transition: width var(--rbx-motion-duration-enter)
    var(--rbx-motion-ease-enter);
}
.rbx-progress-indicator[data-indeterminate] {
  width: 35%;
  animation: rbx-progress 1.3s infinite ease-in-out;
}
@keyframes rbx-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(350%);
  }
}

설치

사용법

구성

진행률을 모를 때

구현 코드

목차