ProgressBox

A row of acrylic plates that light up.

import { ProgressBox } from 'neba';

<ProgressBox />
<ProgressBox value={62} label="Migrating" showValue />

Props

Prop	Type	Default	Description
value	number | null	null	How far along, between min and max. null — the default — is indeterminate: an indicator that has not been told a value should say so rather than draw an empty bar
min	number	0	The bottom of the range
max	number	100	The top of the range
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The size of one plate
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role
label	ReactNode	—	A name for what is loading. Read out with the value by a screen reader
showValue	boolean	false	Shows the value as text beside the shape. Percentage of the range unless format says otherwise
format	Intl.NumberFormatOptions	—	How to write the value. Without it the value is a percentage of min…max, the only formatting that holds for a range nobody described
count	number	4	How many plates. Four reads as a wave and can still be counted at a glance. Set it to the number of steps when the thing being waited on genuinely has steps

Examples

How many plates

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>
  );
}

When the thing really has steps

Give count the number of steps and the plates stop being a decoration: each one is a step, and the leading plate fills as that step runs.

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>
  );
}

Why a third shape

A bar and a ring both say "this much of it is done" — they are about the quantity. A row of plates says "this is working" in the library's own vocabulary: the same cut sheet, the same hairline, the same fill. That is what makes it the right one for a loading state inside a Neba surface, where a foreign grey spinner looks borrowed.

It still answers a value when it has one. The plates fill left to right and the leading one fills partially, because four all-or-nothing plates could only ever show 0, 25, 50, 75 or 100 — and a value of 30% would round away to a quarter.

Colour, not motion

The plates never move. The wave animates the fill and the light edge and nothing else, each plate held back by its own index, so a row of them reads as a surface being written to rather than as something bouncing. Under prefers-reduced-motion the cycle simply slows to where it stops reading as motion at all.

Accessibility

Same as the other two: Base UI's Progress owns role="progressbar" and the value attributes, label is the accessible name, and an indeterminate row reports itself as indeterminate rather than as zero.