ProgressLinear

Shows progress as a horizontal bar. It is the most widely used of the three progress components.

import { ProgressLinear } from 'neba';

<ProgressLinear value={64} label="Uploading assets" showValue />
<ProgressLinear />

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'	Thickness of the groove. Nothing else on a bar has a size
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
thickness	number	—	The groove's thickness in pixels, when the step's own is not the one you want. size still sets the type scale beside it

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

value defaults to null, the indeterminate state: a short segment travels along the groove. A value of 0 means something different ("nothing has progressed yet"), so keep the two apart.

Examples

size

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

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

export default function ProgressLinearSizes() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-4">
      {SIZES.map((size) => (
        <ProgressLinear key={size} size={size} value={45} label={size} showValue />
      ))}
    </div>
  );
}

thickness

size is a step on the library's ladder; thickness is a number of pixels, for the bar a page is actually about. It changes the groove alone — size still sets the type scale of the label beside it.

<ProgressLinear value={62} thickness={12} />

min · max · format

The percentage shown is a proportion of min…max, not of 100. showValue prints it beside the bar, and format takes Intl.NumberFormat options so you can show the number itself: bytes, files, currency.

import { useEffect, useState } from 'react';
import { ProgressLinear } from 'neba';

export default function ProgressLinearValues() {
  const [sent, setSent] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setSent((value) => (value >= 4000 ? 0 : value + 320)), 700);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="flex w-full max-w-96 flex-col gap-5">
      {/* A range that is not 0–100, shown as a percentage of itself. */}
      <ProgressLinear value={3} min={0} max={4} label="Step 3 of 4" showValue color="info" />

      {/* And the same range with the caller saying what the number means. */}
      <ProgressLinear
        value={sent}
        max={4000}
        label="Transferred"
        showValue
        format={{ style: 'unit', unit: 'megabyte' }}
      />
    </div>
  );
}

Reduced motion

prefers-reduced-motion does not stop the indeterminate animation. The travelling segment is replaced by a colour pulse across the whole groove.

Accessibility

• Carries role="progressbar" with the value and range attributes; aria-valuenow is dropped while indeterminate.
• label becomes the accessible name, and aria-valuetext says the same thing as the printed value.