ProgressBox

차례로 불이 들어오는 아크릴 판의 줄.

import { ProgressBox } from 'neba';

<ProgressBox />
<ProgressBox value={62} label="마이그레이션 중" showValue />

Props

Prop	타입	기본값	설명
value	number | null	null	min과 max 사이의 진행도. null(기본값)은 미정 상태입니다 — 값을 듣지 못한 표시기는 빈 막대를 그리는 대신 모른다고 말해야 합니다
min	number	0	범위의 시작
max	number	100	범위의 끝
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	판 하나의 크기
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할
label	ReactNode	—	무엇을 기다리는지. 값과 함께 스크린 리더가 읽습니다
showValue	boolean	false	도형 옆에 값을 글자로 보여 줍니다. format이 없으면 범위에 대한 백분율입니다
format	Intl.NumberFormatOptions	—	값을 어떻게 쓸지. 없으면 min…max에 대한 백분율 — 설명되지 않은 범위에서 유일하게 성립하는 표기입니다
count	number	4	판의 개수. 넷이면 파도가 파도로 읽히면서도 한눈에 셀 수 있습니다. 기다리는 대상에 실제로 단계가 있다면 그 수를 넣으세요

예시

판의 개수

import { ProgressBox } from 'neba';

export default function ProgressBoxCounts() {
  return (
    <div className="flex flex-col gap-5">
      {[3, 4, 6, 10].map((count) => (
        <ProgressBox key={count} count={count} />
      ))}
    </div>
  );
}

정말로 단계가 있을 때

count에 단계 수를 주면 판은 장식이기를 그만둡니다. 판 하나가 단계 하나가 되고, 진행 중인 단계가 앞머리 판을 채웁니다.

import { useState } from 'react';
import { Button, ProgressBox } from 'neba';

const STEPS = ['Account', 'Workspace', 'Billing', 'Invite', 'Done'];

/**
 * When the thing being waited on genuinely has steps, `count` is the number of
 * them and the plates stop being a decoration.
 */
export default function ProgressBoxSteps() {
  const [step, setStep] = useState(2);

  return (
    <div className="flex flex-col items-start gap-4">
      <ProgressBox
        size="lg"
        count={STEPS.length}
        value={step}
        min={0}
        max={STEPS.length}
        color="success"
        label={STEPS[Math.min(step, STEPS.length - 1)]}
      />
      <div className="flex items-center gap-2">
        <Button
          size="sm"
          variant="outline"
          color="secondary"
          disabled={step === 0}
          onClick={() => setStep(step - 1)}
        >
          Back
        </Button>
        <Button size="sm" disabled={step === STEPS.length} onClick={() => setStep(step + 1)}>
          Next
        </Button>
      </div>
    </div>
  );
}

세 번째 모양이 왜 필요한가

막대와 고리는 둘 다 "이만큼 끝났다"고 말합니다. 양에 대한 이야기입니다. 판의 줄은 이 라이브러리 자신의 어휘로 "지금 동작 중"이라고 말합니다 — 같은 잘린 시트, 같은 하이라인, 같은 채움. Neba 표면 안의 로딩 상태에서, 남의 회색 스피너가 빌려온 물건처럼 보이는 자리에 이것이 맞는 이유입니다.

값이 있으면 값에도 답합니다. 판은 왼쪽부터 차오르고 앞머리 판은 부분적으로 채워집니다. 판이 전부 아니면 전무라면 네 개로는 0·25·50·75·100밖에 말할 수 없고, 30%는 4분의 1로 반올림되어 사라질 테니까요.

움직임이 아니라 색

판은 움직이지 않습니다. 파도는 채움과 빛 가장자리만 애니메이션하고, 각 판은 자기 인덱스만큼 늦게 시작합니다. 그래서 한 줄이 튀어 오르는 무언가가 아니라 무언가가 쓰이고 있는 표면으로 읽힙니다. prefers-reduced-motion에서는 주기가 움직임으로 읽히지 않을 만큼 느려질 뿐입니다.

접근성

나머지 둘과 같습니다. role="progressbar"와 값 속성은 Base UI의 Progress가 가지고, label이 접근성 이름이 되며, 미정인 줄은 0이 아니라 미정이라고 스스로 밝힙니다.