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

```svelte
// Error loading file, please report this issue.
```

## Size

```svelte
// Error loading file, please report this issue.
```

## Color

```svelte
// Error loading file, please report this issue.
```

## Centered Content

```svelte
// Error loading file, please report this issue.
```

## Indeterminate

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

```svelte
// Error loading file, please report this issue.
```
## 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
// Error loading file, please report this issue.
```

## Custom Value Text

```svelte
// Error loading file, please report this issue.
```

## 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` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### ProgressRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | () => ProgressApi<PropTypes> |  |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### ProgressRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | Snippet<[() => ProgressApi<PropTypes>]> |  |

### ProgressLabel

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### ProgressValueText

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"span">]>, undefined | Render the element yourself |

### ProgressTrack

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### ProgressRange

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### ProgressCircle

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"svg">]>, undefined | Render the element yourself |

### ProgressCircleTrack

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"circle">]>, undefined | Render the element yourself |

### ProgressCircleRange

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"circle">]>, undefined | Render the element yourself |