ProgressBox

Shows progress as a row of plates that fill in turn. It is the shape that fits a loading state on a Neba surface.

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

Native <div> attributes pass through to the root. Only color and children are excluded, since the table above spells them differently.

value, min, max, format and showValue behave as they do on ProgressLinear. A value of null gives the indeterminate state, where the plates light in sequence.

Examples

count

How many plates to draw. With a value, they fill left to right and the leading plate fills partially: all-or-nothing plates could only ever show 0, 25, 50, 75 or 100 at a count of four.

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

Using it as a step indicator

Match count to the real number of steps and each plate becomes one step, with the running step's plate shown mid-fill.

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

Reduced motion

The plates never move; only the fill and the light edge animate. Under prefers-reduced-motion the cycle slows down.

Accessibility

• Carries role="progressbar" with the value attributes, and label becomes the accessible name.
• The indeterminate state reports itself as indeterminate rather than as zero.