Skip to content

BbProgress

Visualizes task or operation progress state.

import { BbProgress } from 'bitboss-ui';

On this page

Props

NameDescription
indeterminate Type: booleanDefaultfalse

A wait you cannot measure yet: the bar slides back and forth (a calm pulse under reduced motion) and reports no aria-valuenow. modelValue is kept for when it turns off; a null modelValue alone is an empty bar.

For the phase you cannot measure, such as the server processing an upload that has reached 100%. The model-value is kept and shows again when this turns off.

See example
label Type: string

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. A bar with no label, aria-label or aria-labelledby fails npx bitboss-ui check and the ESLint rule require-accessible-name.

See example
max Type: numberDefault100

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
min Type: numberDefault0

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
modelValue Type: number | nullDefault0

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 set indeterminate for an unmeasurable phase: null alone is an empty bar, not an animation.

See example
pt Type: PtMap<BbProgressPtPart, "indeterminate">

Passthrough, object form: the same keys as the pt:* attributes without the prefix. Parts: root, bar; state: indeterminate.

pt:<part> Type: PtValue

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: bar, root. States: indeterminate.

See example