progress

Progress

Shows how far a task has progressed, as a share of the whole; slides a segment while that is unknown.

States: Default

Parts

Part	File	Does
Progress	Progress.vue	Shows how far a task has progressed, as a share of the whole.

Styling

Part	Recipe
Progress	progress
Progress	progress-indicator

Install

Writes 2 files into components/ui/progress/. For agents, npx @frontic/ui docs progress prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; reka-ui

API reference

Progress Progress.vue

Shows how far a task has progressed, as a share of the whole.

Prop	Type	Default
asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —
max	number	100

getValueLabel	((value: number \| null \| undefined, max: number) => string \| undefined)	—

getValueText	((value: number \| null \| undefined, max: number) => string \| undefined)	—

modelValue	number \| null	0

class	ClassValue	—

Data attribute	Values
data-max	—

data-state	'indeterminate' \| 'loading' \| 'complete'

data-value	—

Recipe progress	Sets
base: progress	6 properties · 2 inherited

Recipe progress-indicator	Sets
base: progress-indicator	1 property · 1 inherited

Example