Skip to content
bitboss-ui3.0.0-beta.31

BbProgress

A determinate progress bar that draws the value you bind, in your own units.

import { BbProgress } from 'bitboss-ui';

On this page

Use it for

Use BbProgress when you can measure how far along a task is: bytes uploaded, steps completed, gigabytes of a quota consumed.

Use something else when

  • BbSpinner, when the wait cannot be measured. A null value here renders an empty bar, not an animation
  • BbTable, when a table is simply fetching: its skeleton rows say more

Pass Through

Hover or tap a part to outline it. Toggles flip loading, errors and warnings when the component has them — only parts highlight.

Track measurable work

Bind the value you already own and let max do the arithmetic in the task's real units.

Storage used42.6 / 50 GB
7.4 GB free on the Team plan

The bar is display-only: it emits no events, and v-model writes nothing back.

Your own units

Pass the numbers you already hold and let max do the arithmetic, rather than computing a percentage first.

min moves the lower bound for a range that does not start at zero: a sales floor, an XP band. Leave it at zero and the bar is wrong but plausible, and values outside the range are clamped.

Q3 revenue €310k
Floor €250k · target €370k

A bar that moves

The bar follows your state and never drives it, animating each change over 250 ms. Do not add a transition of your own.

Create workspace Step 1 of 4

There are no events, so derive completion from the same state that feeds the bar, and announce it yourself: a bar reaching its end is silent.

In a real upload the value comes from your request layer. BbDropzone captures and validates the files but does not send them, so the request and the progress it reports stay yours.

ts
const sentBytes = ref(0);

await axios.post('/imports', form, {
    onUploadProgress: (event) => (sentBytes.value = event.loaded),
});

When there is no number

A model-value of null renders an empty bar. There is no indeterminate mode, because the library already has one and it is BbSpinner.

catalogue-2026-08.csv640 KB

The boundary worth handling is the end of an upload, where the bytes stop and the work does not. Swap in the spinner there rather than creeping the bar toward 99%.

Naming and announcing

The bar already carries role="progressbar" and its values, so do not repeat the role on a wrapper. label becomes the aria-label.

Print the number beside the bar: geometry alone is not a readable value. aria-valuetext gives the reading a raw number does not have out loud.

vue
<BbProgress
    aria-valuetext="220 of 500 gigabytes"
    label="Storage used"
    :max="500"
    :model-value="220"
/>

Track and fill

There are no size or color props: --track is the height of the track, 4px by default, and --fill the color of the filled part, var(--bb-primary).

Onboarding · 45%
Storage · 46 / 50 GB
Nearly full

Point --fill at a token rather than a hex, so a retinted bar still follows the theme.