ProgressCircular

차오르는 고리. 막대가 들어갈 자리가 없을 때.

import { ProgressCircular } from 'neba';

<ProgressCircular value={72} showValue label="색인 중" />
<ProgressCircular />

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에 대한 백분율 — 설명되지 않은 범위에서 유일하게 성립하는 표기입니다

예시

크기

import { ProgressCircular, type NebaSize } from 'neba';

const SIZES: NebaSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];

export default function ProgressCircularSizes() {
  return (
    <div className="flex flex-wrap items-center gap-5">
      {SIZES.map((size) => (
        <ProgressCircular key={size} size={size} value={60} showValue />
      ))}
    </div>
  );
}

컨트롤 안에서

고리는 매 단계에서 컨트롤 사다리 바로 아래에 놓입니다 — md 고리는 32px 컨트롤 안의 20px입니다. 그래서 버튼이나 필드, 표의 행에 넣어도 행이 원래보다 높아지지 않습니다.

import { Button, Chip, ProgressCircular, TextField } from 'neba';

/**
 * The ring lands just under the control height at every step, so it drops into
 * a row of controls without making the row taller than it was.
 */
export default function ProgressCircularInline() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <TextField size="sm" placeholder="Search" endIcon={<ProgressCircular size="xs" />} />
      <Chip
        size="sm"
        variant="text"
        color="info"
        startIcon={<ProgressCircular size="xs" color="info" />}
      >
        Building
      </Chip>
      <Button size="sm" variant="outline" startIcon={<ProgressCircular size="xs" />}>
        Syncing
      </Button>
    </div>
  );
}

숫자는 옆에 놓입니다

원판 한가운데의 백분율은 이 컴포넌트 하면 누구나 떠올리는 그림이지만, 다섯 크기 중 둘에서만 성립합니다. xs에서 고리는 지름 14픽셀이고 "40%"가 들어갈 자리가 없습니다. 옆에 두면 모든 크기에서 읽히므로, showValue와 label은 고리와 한 줄에 앉습니다.

라이브러리에서 유일하게 도는 것

이 집의 규칙이 컨트롤의 transform을 막는 이유는, 크기를 바꾸거나 움직이면 그 안의 글자가 다시 샘플링되기 때문입니다. 고리 안에는 글자가 없습니다. 도는 것은 글리프이고, 이것은 Select의 셰브런이 받는 것과 같은 허용입니다.

호는 어디서 시작하는가는 CSS transform이 아니라 SVG 기하 속성입니다. 그것이 없으면 값이 정해진 고리는 3시 방향에서부터 차오르는데, "72%"라고 말할 때 아무도 그것을 뜻하지 않습니다.

접근성

그림 자체는 aria-hidden입니다. 값은 막대에서와 똑같이, 바깥 요소에 걸린 Base UI의 role="progressbar"를 통해 스크린 리더에 닿습니다. label이 접근성 이름이 됩니다.