Progress · base-ui-svelte

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

Groups all parts of the progress bar and provides the task completion status to screen readers. Renders a <div> element.

Props

value number | null —

Name: value
Description: Controlled value.
Type: number | null

min number 0

Name: min
Description: The minimum value.
Type: number
Default: 0

max number 100

Name: max
Description: The maximum value.
Type: number
Default: 100

format Intl.NumberFormatOptions —

Name: format
Description: Options to format the value.
Type: Intl.NumberFormatOptions | undefined

getAriaValueText function —

Name: getAriaValueText
Description: Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
Type: | ((formattedValue: string | null, value: number | null) => string | undefined) | undefined

locale Intl.LocalesArgument —

Name: locale
Description: The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale.
Type: Intl.LocalesArgument | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Progress.Indicator

Visualizes the completion status of the task. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Progress.Label

An accessible label for the progress bar. Renders a <span> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Progress.Track

Contains the progress bar indicator. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Progress.Value

A text element displaying the current value. Renders a <span> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[formattedValue: string | null, value: number | null]>

Data attributes

Attribute	Description
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.