base-ui-svelte

Progress

Displays an indicator showing the completion progress of a task.

View as Markdown
Export data 35

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Progress.Root

Extends div HTML attributes.

PropertyTypeDefaultDescription
valuenumber | nullControlled value.
minnumber
maxnumber
formatIntl.NumberFormatOptions | undefined
getAriaValueText| ((formattedValue: string | null, value: number | null) => string | undefined) | undefined
localeIntl.LocalesArgument | undefined
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-completePresent on the element when applicable.
data-indeterminatePresent when the checkbox is indeterminate.
data-progressingPresent on the element when applicable.

Progress.Indicator

Extends div HTML attributes.

PropertyTypeDefaultDescription
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-completePresent on the element when applicable.
data-indeterminatePresent when the checkbox is indeterminate.
data-progressingPresent on the element when applicable.

Progress.Label

Extends span HTML attributes.

PropertyTypeDefaultDescription
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-completePresent on the element when applicable.
data-indeterminatePresent when the checkbox is indeterminate.
data-progressingPresent on the element when applicable.

Progress.Track

Extends div HTML attributes.

PropertyTypeDefaultDescription
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-completePresent on the element when applicable.
data-indeterminatePresent when the checkbox is indeterminate.
data-progressingPresent on the element when applicable.

Progress.Value

Extends span HTML attributes.

PropertyTypeDefaultDescription
childrenSnippet<[formattedValue: string | null, value: number | null]>Content rendered inside the part.
Data attributeDescription
data-completePresent on the element when applicable.
data-indeterminatePresent when the checkbox is indeterminate.
data-progressingPresent on the element when applicable.