# Progress Ring
[component-header:sl-progress-ring]
Progress rings are used to show the progress of a determinate operation in a circular fashion.
```html preview
```
```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
## Examples
### Size
Use the `--size` custom property to set the diameter of the progress ring.
```html preview
```
```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
### Track Width
Use the `--track-width` custom property to set the width of the progress ring's track.
```html preview
```
```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
### Colors
To change the color, use the `--track-color` and `--indicator-color` custom properties.
```html preview
```
```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
### Labels
Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
```html preview
```
```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
### Showing Values
Use the default slot to show a label inside the progress ring.
```html preview
50%
```
```jsx react
import { useState } from 'react';
import {
SlButton,
SlIcon,
SlProgressRing
} from '@shoelace-style/shoelace/dist/react';
const App = () => {
const [value, setValue] = useState(50);
function adjustValue(amount) {
let newValue = value + amount;
if (newValue < 0) newValue = 0;
if (newValue > 100) newValue = 100;
setValue(newValue);
}
return (
<>
{value}%
adjustValue(-10)}>
adjustValue(10)}>
>
);
};
```
[component-metadata:sl-progress-ring]