bref Progress
Show determinate or indeterminate progress, with an optional controlled seek control.
Usage
<Progress label="Upload progress" value={0.4} />
Playground
Live preview
Settings
View generated code
<script>
import { Progress } from 'bref-ui';
let value = $state(0.4);
</script>
<div dir="ltr">
<Progress label={'Upload progress'} size="medium" {value} disabled={false} />
</div>
States and sizes
Seekable progress
No native input or change event yet. Submit to read the native range value.
The form's reset handler prevents the native reset and restores the controlled value.
Current: 0.35 (35%). Drag, tap, or use Arrow, Home, and End keys.
<Progress label="Playback position" {value} onSeek={(next) => (value = next)} />
Direction and disabled state
Right-to-left playback: 0.35
Disabled seek control
Props and accessibility
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | No | — | Optional accessible name of the indicator or seek control. |
value | number | No | Omitted | Normalized value from 0 to 1. Omit for indeterminate progress. |
onSeek | (value: number) => void | No | Omitted | Makes progress seekable and emits normalized values on edits. |
disabled | boolean | No | false | Disables the seek control when present. |
size | BaseSize | No | medium | Track thickness: small, medium, or large. |
The indicator uses a native progress element with a fixed maximum of 1. Seekable progress
exposes a native range control. Add a label or an external label association when an
accessible name is needed. Native attributes and events forward to the progress indicator, or
to the range control when seeking, including aria-valuetext and aria-controls . Indeterminate progress omits its value. No live region repeats value changes. The fill uses the
primary theme color. Reduced motion leaves a visible, stationary segment for indeterminate progress.