Progress

Visualizes the progress or completion status of a task or process.

Structure

	<script lang="ts">
	import { Progress } from "bits-ui";
</script>
 
<Progress.Root />
	

API Reference

Progress.Root

The progress bar component.

Property Type Description
max
number

The maximum value of the progress bar. Used to calculate the percentage of the progress bar.

Default: 100
value
number

The current value of the progress bar.

Default: 0
onValueChange
function

A callback that fires when the value changes.

Default: undefined
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-value
——

The current value of the progress bar.

data-state
enum

The current state of the progress bar.

data-max
——

The maximum value of the progress bar.

data-progress-root
——

Present on the root element.