General
Progress Bar
A progress indicator displaying task or operation completion status.
Overview
ProgressBar visualizes how far along a task is with a horizontal bar. It accepts a value and a max; the indicator width is value / max, clamped to [0,100], so it works for percentage progress and for non-percentage scales like file size in bytes or step counts.
Useful for uploads, checkout steps, free-shipping thresholds, and any linear process where seeing the remaining distance reduces anxiety.
Key Business & UX Benefits
- Free-shipping progress bars are one of the highest-impact AOV levers in ecommerce; this primitive ships them without bespoke styling.
- Visible checkout progress reduces cart abandonment by showing shoppers how close they are to finishing the flow.
- Configurable
maxmakes the bar work for percentages, byte counts, and step counters with the same primitive and the same accessibility behavior.
Pro-Tip from Larry: Set
:max for non-percentage progress (e.g. file size in bytes) so the bar scales to your domain values.Usage
LProgressBar
<LProgressBar :value="42" :max="100" />
Feature List
- `value` and `max` (default 100) drive the fill, clamped to `[0,100]` so passing 150 of 100 still renders a full bar
- Built on reka-ui's `ProgressRoot`, so `aria-valuenow` and `aria-valuemax` are emitted for screen readers
- Non-percentage scales work directly: pass byte counts or step counts as `value` and `max` without normalizing
- Single `.progress-bar` root class anchors theme overrides for fill color, height, and radius
- Stateless prop surface keeps the bar a pure indicator, leaving completion logic in the consumer
API Reference
| Prop | Default | Type |
|---|---|---|
valuerequired | number | |
max | 100 | number |