# 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
```
## Examples
### Size
Use the `size` attribute to set the diameter of the progress ring.
```html preview
```
### Stroke Width
Use the `stroke-width` attribute to set the width of the progress ring's indicator.
```html preview
```
### Colors
To change the color, use the `--track-color` and `--indicator-color` custom properties.
```html preview
```
### Labels
Use the default slot to show a label.
```html preview
50%
```
[component-metadata:sl-progress-ring]