LoadingBar

Displays the completion progress of a task. Determinate horizontal bar — a filled track plus a bg-cta-colored fill that grows with value (0–100).

<LoadingBar :value="33" />
<LoadingBar :value="66" />
<LoadingBar :value="100" />

When to reach for a LoadingBar

• File uploads — show exact byte or percentage progress
• Multi-step background processes where the total number of steps is known
• Data export or import operations with measurable progress
• Page-top route transitions — thin bar that fills as the next page loads

Always pair with a label so users know what is loading ("Uploading report.csv — 73%"). A bar without context just says "something is happening".

When not to use a LoadingBar

• Short operations under ~1 second — a spinner is less disruptive
• Progress that genuinely can't be measured — use an indeterminate spinner instead. A bar that sweeps without a known endpoint is fine; a bar that fakes a percentage is dishonest.
• Compact table cells — a spinner fits the row height; a bar is too wide for the context
• Multi-step workflows where the step itself matters (not just percentage) — use a Stepper

Sizes

<LoadingBar size="sm" :value="50" />
<LoadingBar size="md" :value="50" />

Props

Prop	Type	Default	Description
value	number	0	Progress percentage 0–100.
size	'sm' | 'md'	'md'	Track height: sm is 4px (h-1), md is 8px (h-2).

The fill animates over 300ms when value changes.