Progress

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

<Progress.root class="DemoProgressRoot" value={66} aria-label="Progress">
  <Progress.indicator
    class="DemoProgressIndicator"
    value={66}
    style="transform: translateX(-34%);"
  />
</Progress.root>

.DemoProgressRoot {
	position: relative;
	overflow: hidden;
	background: var(--black-a9);
	border-radius: 99999px;
	width: 300px;
	height: 25px;

	/* Fix overflow clipping in Safari */
	/* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
	transform: translateZ(0);
}

.DemoProgressIndicator {
	background-color: white;
	width: 100%;
	height: 100%;
	transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
}

• Provides context for assistive technology to read the progress of a task.

Anatomy

Import all parts and piece them together.

<Progress.root>
  <Progress.indicator />
</Progress.root>

Anatomy

Root: Contains all of the progress parts.
Indicator: Shows progress visually and exposes it to assistive technologies.

API Reference

Root

Contains all of the progress parts.

Prop	Type	Default
`get_value_label`	`any`	`nil`
`max`	`any`	`100`
`value`	`any`	`nil`

get_value_label

Type any Default nil

max

Type any Default 100

value

Type any Default nil

Data attributes

Attribute	Values	Description
`[data-state]`	`complete \| indeterminate \| loading`	Reflects progress state.
`[data-value]`	`The current value`	Present when a value is set.
`[data-max]`	`The max value`	Present when max is set.

Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

Prop	Type	Default	Description
`max`	`any`	`100`
`value`	`any`	`nil`

max

Type any Default 100

value

Type any Default nil

Data attributes

Attribute	Values	Description
`[data-state]`	`complete \| indeterminate \| loading`	Reflects progress state.
`[data-value]`	`The current value`	Present when a value is set.
`[data-max]`	`The max value`	Present when max is set.

Accessibility

Adheres to the progressbar role requirements.