## Feature Examples
### Size
- description: Control progress bar size with `size` prop: - `large` is best for places where progress bar is the only element present. - `medium` is for common use cases. - `small` fits into smaller UI elements like cards and widgets. - `tiny` is used for dense layouts.
- example:
```jsx
;
```
### Skin
- description: Control the appearance with `skin` prop. It supports 3 styles: - `standard` is for common cases. - `success` is best for highligthing the positive effect of the process. - `premium` is to prompt users to upgrade their plans to premium subscription.
- example:
```jsx
;
```
### Light
- description: Invert the skin of a progress bar with the `light` prop. Use this skin on backgrounds with colors or images.
- example:
```jsx
;
```
### Progress indication
- description: Add a label that indicates current progress in percentage with `showProgressIndication` prop.
- example:
```jsx
;
```
### Error status
- description: Let users now if process failed using `error` property. Add text that explains what went wrong or what action the user should take with the `errorMessage` prop. Message will be revealed on hover over.
- example:
```jsx
;
```
### Label
- description: Add custom label for the progress bar using `label` prop.
- example:
```jsx
;
```
### Label placement
- description: Control custom label position using `labelPlacement` prop: - `bottom` (default) - `center`
- example:
```jsx
;
```
## Common Use Case Examples
### Setup progress
- description: Use circular progress bar to indicate users where they are in the feature or tool setup process.
- example:
```jsx
SEO setup checklist
Fix current issues and follow recommendations to improve this site’s
performance in search results.
;
```