# Progress Circular
An indicator showing the progress or completion of a task.
```tsx
import { Progress, Slider } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';
export default function Default() {
const [value, setValue] = useState(50);
return (
setValue(e.value[0])} step={10}>
);
}
```
## Size
```tsx
import { Progress } from '@skeletonlabs/skeleton-react';
import type { CSSProperties } from 'react';
export default function Size() {
return (
);
}
```
## Color
```tsx
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Color() {
return (
);
}
```
## Centered Content
```tsx
import { Progress } from '@skeletonlabs/skeleton-react';
export default function CenteredContent() {
return (
);
}
```
## Indeterminate
Set the value to `null` to make the progress indeterminate.
```tsx
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
);
}
```
## 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
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Format() {
return (
);
}
```
## Custom Value Text
```tsx
import { Progress } from '@skeletonlabs/skeleton-react';
export default function CustomValueText() {
return (
);
}
```
## 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 | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| value | - | ProgressApi\ |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| children | - | (progress: ProgressApi\) => ReactNode |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"svg">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined — Render the element yourself |