# Progress Circular
An indicator showing the progress or completion of a task.

```tsx

	const [value, setValue] = useState(50);
	return (
		<div className="flex flex-col gap-8 items-center">
			<Progress value={value} className="items-center w-fit">
				<Progress.Label>Label</Progress.Label>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
			<Slider className="w-full" value={[value]} onValueChange={(e) => setValue(e.value[0])} step={10}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
		</div>
	);
}

```

## Size

```tsx

	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress value={75} className="w-fit">
				<Progress.Circle style={{ '--size': '48px', '--thickness': '6px' } as CSSProperties}>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
			<Progress value={75} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
			<Progress value={75} className="w-fit">
				<Progress.Circle style={{ '--size': '125px', '--thickness': '12px' } as CSSProperties}>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
		</div>
	);
}

```

## Color

```tsx

	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-primary-500/30" />
					<Progress.CircleRange className="stroke-primary-500" />
				</Progress.Circle>
			</Progress>
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-secondary-500/30" />
					<Progress.CircleRange className="stroke-secondary-500" />
				</Progress.Circle>
			</Progress>
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-tertiary-500/30" />
					<Progress.CircleRange className="stroke-tertiary-500" />
				</Progress.Circle>
			</Progress>
		</div>
	);
}

```

## Centered Content

```tsx

	return (
		<Progress className="w-fit relative">
			<div className="absolute inset-0 flex items-center justify-center">
				<Progress.ValueText />
			</div>
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
		</Progress>
	);
}

```

## Indeterminate

Set the value to `null` to make the progress indeterminate.

```tsx

	return (
		<Progress className="items-center w-fit" value={null}>
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
			<Progress.ValueText />
		</Progress>
	);
}

```

## Format

Use the `format` prop to customize the output of the `ValueText` component, options are:

- `percentage` (default) - shows the percentage value
- `decimal` - shows the decimal value (0.0 - 1.0)
- Provide formatting using the [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)

```tsx

	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress className="items-center w-fit" formatOptions={{ style: 'percent' }}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
			<Progress className="items-center w-fit" formatOptions={{ style: 'decimal' }}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
			<Progress className="items-center w-fit" formatOptions={{ style: 'currency', currency: 'EUR' }}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
		</div>
	);
}

```

## Custom Value Text

```tsx

	return (
		<Progress className="items-center w-fit">
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
			<Progress.ValueText>
				<Progress.Context>{(progress) => `${progress.value} of ${progress.max}`}</Progress.Context>
			</Progress.ValueText>
		</Progress>
	);
}

```

## API Reference

### ProgressRoot

| Property | Type | Description |
| --- | --- | --- |
| `ids` | Partial<{ root: string; track: string; label: string; circle: string; }> | undefined | The ids of the elements in the progress bar. Useful for composition. |
| `value` | number | null | undefined | The controlled value of the progress bar. |
| `defaultValue` | number | null | undefined | The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar. Default: 50 |
| `min` | number | undefined | The minimum allowed value of the progress bar. Default: 0 |
| `max` | number | undefined | The maximum allowed value of the progress bar. Default: 100 |
| `translations` | IntlTranslations | undefined | The localized messages to use. |
| `onValueChange` | ((details: ValueChangeDetails) => void) | undefined | Callback fired when the value changes. |
| `formatOptions` | NumberFormatOptions | undefined | The options to use for formatting the value. Default: { style: "percent" } |
| `locale` | string | undefined | The locale to use for formatting the value. Default: "en-US" |
| `dir` | "ltr" | "rtl" | undefined | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | (() => ShadowRoot | Node | Document) | undefined | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `orientation` | "horizontal" | "vertical" | undefined | The orientation of the element. Default: "horizontal" |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### ProgressRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | ProgressApi<PropTypes> |  |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### ProgressRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | (progress: ProgressApi<PropTypes>) => ReactNode |  |

### ProgressLabel

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### ProgressValueText

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"span">) => Element) | undefined | Render the element yourself |

### ProgressTrack

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### ProgressRange

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### ProgressCircle

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"svg">) => Element) | undefined | Render the element yourself |

### ProgressCircleTrack

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"circle">) => Element) | undefined | Render the element yourself |

### ProgressCircleRange

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"circle">) => Element) | undefined | Render the element yourself |