Progress - Circular

A component for displaying the completion status of a task or process.

Anatomy

Usage

<script>
  import {Progress} from 'ui-ingredients';
</script>

<Progress.Root min={0} max={100} value={50}>
  <Progress.Label>Label</Progress.Label>
  <Progress.Circle>
    <Progress.CircleTrack />
    <Progress.CircleRange />
  </Progress.Circle>
</Progress.Root>

API Reference

Root

Prop	Default	Description
`defaultValue`	`50`	`number` The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar.
`formatOptions`	`{ style: "percent" }`	`Intl.NumberFormatOptions` The options to use for formatting the value.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; track?: string; label?: string; circle?: string; }` The ids of the elements in the progress bar. Useful for composition.
`locale`	`"en-US"`	`string` The locale to use for formatting the value.
`max`	`100`	`number` The maximum allowed value of the progress bar.
`min`	`0`	`number` The minimum allowed value of the progress bar.
`onValueChange`		`(details: ValueChangeDetails) => void` Callback fired when the value changes.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the element.
`translations`		`IntlTranslations` The localized messages to use.
`value`		`number` The controlled value of the progress bar.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-max`
`data-orientation`	The orientation of the progress
`data-part`	root
`data-scope`	progress
`data-state`
`data-value`	The value of the item

Circle

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

CircleRange

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	circle-range
`data-scope`	progress
`data-state`

CircleTrack

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the circletrack
`data-part`	circle-track
`data-scope`	progress

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the label
`data-part`	label
`data-scope`	progress

Range

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the range
`data-part`	range
`data-scope`	progress
`data-state`

Track

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

ValueText

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

View

Prop	Default	Description
`state`		`ProgressState`
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	view
`data-scope`	progress
`data-state`