# Progress Circular
An indicator showing the progress or completion of a task.
```tsx
const [value, setValue] = useState(50);
return (
setValue(e.value[0])} step={10}>
);
}
```
## Size
```tsx
return (
);
}
```
## Color
```tsx
return (
);
}
```
## Centered Content
```tsx
return (
);
}
```
## Indeterminate
Set the value to `null` to make the progress indeterminate.
```tsx
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
return (
);
}
```
## Custom Value Text
```tsx
return (
);
}
```
## API Reference