# Progress Circular
An indicator showing the progress or completion of a task.
```svelte
(value = e.value[0])} step={10}>
```
## Size
```svelte
```
## Color
```svelte
```
## Centered Content
```svelte
```
## Indeterminate
Set the value to `null` to make the progress indeterminate.
```svelte
```
## 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)
```svelte
```
## Custom Value Text
```svelte
```
## API Reference
| Property | Default | Type |
| ------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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 | 50 | 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. |
| min | 0 | number \| undefined — The minimum allowed value of the progress bar. |
| max | 100 | number \| undefined — The maximum allowed value of the progress bar. |
| translations | - | IntlTranslations \| undefined — The localized messages to use. |
| onValueChange | - | ((details: ValueChangeDetails) => void) \| undefined — Callback fired when the value changes. |
| formatOptions | \{ style: "percent" } | NumberFormatOptions \| undefined — The options to use for formatting the value. |
| locale | "en-US" | string \| undefined — The locale to use for formatting the value. |
| dir | "ltr" | "ltr" \| "rtl" \| undefined — The document's text/writing direction. |
| getRootNode | - | (() => ShadowRoot \| Node \| Document) \| undefined — A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| orientation | "horizontal" | "horizontal" \| "vertical" \| undefined — The orientation of the element. |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| value | - | () => ProgressApi\ |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| children | - | Snippet\<\[() => ProgressApi\]> |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"span">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"svg">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"circle">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"circle">]> \| undefined — Render the element yourself |