Progress Bar

ProgressBar shows how far along a task is. It is stateless — the consumer controls the value. Fill width is driven by an inline style percentage; no animation engine required.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { ProgressBar } from '@infinitibit_gmbh/ui';

export function Example() {
  return <ProgressBar value={60} />;
}

Values

value is clamped between 0 and max (default 100).

Label and value display

Pass label to show descriptive text, and showValue to display the percentage.

API

Prop	Type	Default	Description
value	number	—	Current progress value (required)
max	number	100	Maximum value
label	string	—	Visible label shown above the track
showValue	boolean	—	Show percentage (e.g. 60%) beside the label

All other <div> props are forwarded.

Accessibility

• role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax is set automatically.
• Pass aria-label when no visible label is provided so screen readers announce the purpose.
• Value is clamped before being set on aria-valuenow — no invalid ARIA values.