Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Features

  • Assistive reading technology support for progress bar

Anatomy

  • Progress: The progress component.

Usage

To create a progress bar component, use the createProgress builder function. Follow the anatomy or the example above to create your progress bar.

API Reference

createProgress

The builder function used to create the progress component.

Props

Prop Default Type / Description
max 100
number

The maximum value of the progress bar.
defaultValue 0
number

The default value of the progress bar.
value -
Writable<number>

A writable store that controls the current value of the progress bar.

See Bring Your Own Store

onValueChange -
ChangeFn<number>

A callback that is called when the value of the progress bar changes.

See Change Functions

Elements

Element Description

The builder store used to create the progress bar.

States

State Description
value

A writable store with the current value of the progress bar.

Options

Option Description
max

The maximum value of the progress bar.

root

The root progress component.

Data Attributes

Data Attribute Value
[data-value]

The current value of the progress bar.
[data-state]

'indeterminate' | 'complete' | 'loading'
[data-max]

The maximum value of the progress bar.
[data-melt-progress]

Present on all root elements.