Skip to content

BbProgress

Visualizes task or operation progress state.

import { BbProgress } from 'bitboss-ui';

On this page

Props

NameTypeDefaultDescription
labelstring | undefined-

Accessible name for the progress bar, forwarded to aria-label. A progressbar with no name is announced only as a bare percentage, so give it one whenever the surrounding text doesn't already name it (e.g. "Upload"). Matches the label naming prop on BbSpinner / BbIcon.

Names the bar for assistive tech; it renders nothing on screen. Print the value beside the bar as well, and add an aria-valuetext attribute when the raw number reads badly out loud.

See example
maxnumber | undefined100

Maximum value. Upper cap.

Feed it your real units — bytes, gigabytes, number of steps — and let the component do the arithmetic. Pre-computing a percentage adds a rounding step between the number you print and the bar you draw.

See example
minnumber | undefined0

Minimum value. Lower cap.

Only for ranges that do not start at zero, such as a sales floor or an XP band. Getting it wrong is silent: the bar stays plausible and reports the wrong fraction. max at or below min renders an empty bar.

See example
modelValuerequirednumber | null0

The current progress value — a number between min and max. This is a one-way input prop (BbProgress is a display component and never emits update:modelValue); null means no value and renders an empty bar.

Bind it one way. There is no event to listen for, so derive completion from your own state (value >= max), and hand an unmeasurable phase to BbSpinner rather than passing null and hoping for an animation.

See example
ptPtMap<"root", never> | undefined-

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

pt:rootPtValue | undefined-